编程 Javascript

sogou地图API用法实例教程

Posted in Javascript onSeptember 11, 2014

本文实例讲述了sogou地图API应用，是非常实用的技巧。分享给大家供大家参考。具体实现方法如下：

地图的初始化

1、添加引用地图的API文件：

<script src="http://xiazai.3water.com/201409/other/api_v2.5.1.js" type="text/javascript"></script>

2、网站初始化加载事件：

window.onload = function () { 
var map = new sogou.maps.Map(document.getElementById("map_canvas"), {});
}

创建一个id为map_canvas的div,自定义div样式，网站运行时地图自动加载；

具体代码如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
 <style type="text/css">
html {height: auto;}
body {height: auto;margin: 0;padding: 0;}
#map_canvas {width:1000px;height: 500px;position: absolute;}
@media print {#map_canvas {height: 950px;}}
</style>

<script src="http://xiazai.3water.com/201409/other/api_v2.5.1.js" type="text/javascript"></script>
<script>
window.onload = function () {
 var map = new sogou.maps.Map(document.getElementById("map_canvas"), {});

}
</script>
</head>
<body>
 <form id="form1" runat="server">
 <div id="map_canvas"></div>
 </form>
</body>
</html>

指定显示莫城市地图

关键代码如下：

window.onload = function () { 
var myOptions = { zoom: 10,center: new sogou.maps.Point(12956000, 4824875) };//城市坐标，本坐标为北京坐标
var map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions); 
}

地图属性了解

列举一下常用的一些属性比如:地图的移动、地图类型转换、跳转到指定城市

具体代码如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 <title></title>
 <style type="text/css">
html {height: auto;}
body {height: auto;margin: 0;padding: 0;}
#map_canvas {width:1000px;height: 500px;position: absolute;}
@media print {#map_canvas {height: 950px;}}
</style>

<script src="http://xiazai.3water.com/201409/other/api_v2.5.1.js" type="text/javascript"></script>
<script>
var map;//创建全局变量
window.onload = function () { 
 var myOptions = { zoom: 10, center: new sogou.maps.Point(12956000, 4824875) };//指定城市
 map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions);//创建地图 

}
//setMapTypeId方法示例
function setMapTypeId(num) { 
 //设置地图类型，如：
 //sogou.maps.MapTypeId.ROADMAP 普通地图
 //sogou.maps.MapTypeId.SATELLITE 卫星地图
 //sogou.maps.MapTypeId.HYBRID 卫星和路网混合地图
 //map.setMapTypeId(sogou.maps.MapTypeId.HYBRID)
 switch (num) {
 case 1: map.setMapTypeId(sogou.maps.MapTypeId.ROADMAP); break; //普通地图
 case 2: map.setMapTypeId(sogou.maps.MapTypeId.SATELLITE); break; //卫星地图
 case 3: map.setMapTypeId(sogou.maps.MapTypeId.HYBRID); break; //卫星和路网混合地图
 }
}
//panBy方法示例地图手动移动
function panBy(a, b) {
 map.panBy(a, b)
}
//setOptions方法示例显示指定地区
function setOptions() {
 //同时设置地图中心、级别、类型
 map.setOptions({ center: new sogou.maps.Point(13522000, 3641093), zoom: 12, mapTypeId: sogou.maps.MapTypeId.ROADMAP })
}
//setCenter方法示例 显示指定的地区 a、b为地图坐标，C为地图级别
function setCenter(a, b, c) {
 map.setCenter(new sogou.maps.Point(a, b), c)
}
//fitBounds方法示例 跳转到指定的范围内
function fitBounds() {
 //设置一个故宫附近的范围
 var bounds = new sogou.maps.Bounds(12955101, 4824738, 12958355, 4827449);
 //将地图设置为可全部显示这个范围
 //注：不是设置bounds为这个值，而是调整到合适的位置
 map.fitBounds(bounds)
}
</script>
</head>
<body>
 <form id="form1" runat="server">
 <input value="普通地图" onclick="setMapTypeId(1)" type="button"/>
 <input value="卫星地图" onclick="setMapTypeId(2)" type="button"/>
 <input value="卫星和路网混合地图" onclick="setMapTypeId(3)" type="button"/>
 <input value="向左移动" onclick="panBy(200,0)" type="button"/>
 <input value="向右移动" onclick="panBy(-200,0)" type="button"/>
 <input value="向上移动" onclick="panBy(0,200)" type="button"/>
 <input value="向下移动" onclick="panBy(0,-200)" type="button"/>
 <input value="向左上移动" onclick="panBy(200,200)" type="button"/> 
 <input value="上海" onclick="setOptions()" type="button"/>
 <input value="天津" onclick="setCenter(13046000,4714250,10)" type="button"/>
  <input value="故宫" onclick="fitBounds()" type="button"/>
 <div id="map_canvas" ></div>
 </form>
</body>
</html>

地图描点属性

地图上很重要的属性，给地图添加描点，是常用的方法属性，

搜狗API提供两种描点填写形式默认描点和动态添加描点

默认描点添加：

var location = new sogou.maps.Point(12956000, 4824875); //指定描点位置
var map = new sogou.maps.Map(document.getElementById("map_canvas"), {});//初始化地图
var marker = new sogou.maps.Marker({
 position: location,//描点坐标
 title: "描点",//描点名称
 label: { visible: true, align: "BOTTOM" },//描点显示形式
 map: map, 
 });//添加描点到地图

动态描点添加

window.onload = function () { 
//初始化地图
 map = new sogou.maps.Map(document.getElementById("map_canvas"), {});
//为地图添加点击事件
sogou.maps.event.addListener(map, 'click', function (event) {
 var marker1 = new sogou.maps.Marker({
 position: event.point, 
 map: map
 });
 }); 
}

根据两描点测距

//获取类的唯一示例
function getInstance(a) {
 a.hasOwnProperty("_instance") || (a._instance = new a);
 return a._instance
}
//两点相连
function Lines(myLatlng, myPoint) { 
 var convertor = getInstance(sogou.maps.Convertor);
 var distance = convertor.distance(myLatlng, myPoint);
 //两点链接
 var line = new sogou.maps.Polyline({
 path: [myLatlng, myPoint],
 strokeColor: "#FF0000",
 strokeOpacity: 1.0,
 strokeWeight: 1,
 title: parseInt(distance) + "米",
 map: map
 }); 
}

根据上述属性做了一个小的模块，地图上动态测距代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 <title></title>
 <style type="text/css">
html {height: auto;}
body {height: auto;margin: 0;padding: 0;}
#map_canvas {width:1000px;height: 500px;position: absolute;}
@media print {#map_canvas {height: 950px;}}
</style>
 <script src="http://xiazai.3water.com/201409/other/api_v2.5.1.js" type="text/javascript"></script>
 <script>
  var map;var num;var Listener;
  //获取类的唯一示例
  function getInstance(a) {
   a.hasOwnProperty("_instance") || (a._instance = new a);
   return a._instance
  }
  window.onload = function () { 
  //初始化地图
   map = new sogou.maps.Map(document.getElementById("map_canvas"), {}); 
  }
  function AddCj() {
   var mypointh; var myPoint;
   num = 0;
   //为地图添加点击事件、点击后显示当前坐标并添加点击描点
   Listener = sogou.maps.event.addListener(map, 'click', function (event) {
    if (num == 0) {
     mypointh = myPoint = event.point; //获取点击位置的坐标 
    }
    else {
     myPoint = mypointh;
     mypointh = event.point; //获取点击位置的坐标 
    }
    Lines(mypointh, myPoint);
    num++;
   });
  }
  function DelCj() {
   sogou.maps.event.removeListener(Listener)
  }

  //两点相连
  function Lines(myLatlng, myPoint) { 
   var convertor = getInstance(sogou.maps.Convertor);
   var distance = convertor.distance(myLatlng, myPoint);
   //两点链接
   var line = new sogou.maps.Polyline({
    path: [myLatlng, myPoint],
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 1,
    title: parseInt(distance) + "米",
    map: map
   });
   placeMarker(myLatlng, parseInt(distance));
  }
  //动态添加描点，根据指定的坐标创建描点
  function placeMarker(location,jl) {
   var clickedLocation = location;
   var marker1 = new sogou.maps.Marker({
    position: location,
    title: jl+"米",
    label:{visible:true,align:"BOTTOM"},
    map: map
   });
  }
  function Mapclear() {
   num = 0;
   map.clearAll();
  }
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <input type="button" value="测距" onclick="AddCj()" />
 <input type="button" value="取消测距" onclick="DelCj()" />
 <input type="button" value="清空" onclick="Mapclear()" /> 
 <div id="map_canvas" ></div>
 </form>
</body>
</html>

希望本文所述对大家的sogou地图开发有所帮助

sogou地图API用法实例教程

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

node.js中的fs.appendFile方法使用说明

Dec 17 Javascript

jquery实现增加删除行的方法

Feb 03 Javascript

JS实现FLASH幻灯片图片切换效果的方法

Mar 04 Javascript

JavaScript中数据结构与算法(二)：队列

Jun 19 Javascript

轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作

Nov 30 Javascript

解决axios发送post请求返回400状态码的问题

Aug 11 Javascript

加快Vue项目的开发速度的方法

Dec 12 Javascript

VUE引入第三方js包及调用方法讲解

Mar 01 Javascript

JS学习笔记之数组去重实现方法小结

May 29 Javascript

微信小程序蓝牙连接小票打印机实例代码详解

Jun 03 Javascript

vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】

Mar 06 Javascript

Angular进行简单单元测试的实现方法实例

Aug 16 Javascript

当前流行的JavaScript代码风格指南

Sep 10 #Javascript

在css加载完毕后自动判断页面是否加入css或js文件

Sep 10 #Javascript

JQuery拖动表头边框线调整表格列宽效果代码

Sep 10 #Javascript

jQuery通过点击行来删除HTML表格行的实现示例

Sep 10 #Javascript

javascipt:filter过滤介绍及使用

Sep 10 #Javascript

用javascript将数据导入Excel示例代码

Sep 10 #Javascript

js使用for循环及if语句判断多个一样的name

Sep 09 #Javascript