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 相关文章推荐
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
AngularJS基础知识
Dec 21 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
JavaScript中ES6 Babel正确安装过程
Jul 18 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
vue.js todolist实现代码
Oct 29 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
总结javascript三元运算符知识点
Sep 28 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 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
Python定时任务sched模块用法示例
2018/07/16 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
Python模块 _winreg操作注册表
2020/02/05 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
秋季运动会通讯稿
2014/01/24 职场文书
领班岗位职责范文
2014/02/06 职场文书
班级文化建设标语
2014/06/23 职场文书
暑期社会实践证明书
2014/11/17 职场文书
2014年纠风工作总结
2014/12/08 职场文书
奖学金感谢信
2015/01/21 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python