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地图开发有所帮助

Javascript 相关文章推荐
jQuery bxCarousel实现图片滚动切换效果示例代码
May 15 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
js 本地预览的简单实现方法
Feb 18 Javascript
使用js画图之饼图
Jan 12 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
浅析JS运动
Dec 28 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
前端开发基础javaScript的六大作用
Aug 06 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
You might like
PHP文件上传实例详解!!!
2007/01/02 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
php中file_exists函数使用详解
2015/05/08 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
python 定义n个变量方法 (变量声明自动化)
2018/11/10 Python
python requests指定出口ip的例子
2019/07/25 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
jupyter notebook 添加kernel permission denied的操作
2020/04/21 Python
美国在线珠宝商店:SZUL
2017/02/11 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
酒店开业策划方案
2014/06/02 职场文书
企业整改报告范文
2014/11/08 职场文书
经营场所证明范本
2015/06/19 职场文书
Python实现排序方法常见的四种
2021/07/15 Python
Golang bufio详细讲解
2022/04/21 Golang