sogou地图API用法实例教程
本文实例讲述了sogou地图API应用,是非常实用的技巧。分享给大家供大家参考。具体实现方法如下:
地图的初始化
1、添加引用地图的API文件:
<scriptsrc="http://xiazai.jb51.net/201409/other/api_v2.5.1.js"type="text/javascript"></script>
2、网站初始化加载事件:
window.onload=function(){ varmap=newsogou.maps.Map(document.getElementById("map_canvas"),{}); }
创建一个id为map_canvas的div,自定义div样式,网站运行时地图自动加载;
具体代码如下
<htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server"> <title></title> <styletype="text/css"> html{height:auto;} body{height:auto;margin:0;padding:0;} #map_canvas{width:1000px;height:500px;position:absolute;} @mediaprint{#map_canvas{height:950px;}} </style> <scriptsrc="http://xiazai.jb51.net/201409/other/api_v2.5.1.js"type="text/javascript"></script> <script> window.onload=function(){ varmap=newsogou.maps.Map(document.getElementById("map_canvas"),{}); } </script> </head> <body> <formid="form1"runat="server"> <divid="map_canvas"></div> </form> </body> </html>
指定显示莫城市地图
关键代码如下:
window.onload=function(){ varmyOptions={zoom:10,center:newsogou.maps.Point(12956000,4824875)};//城市坐标,本坐标为北京坐标 varmap=newsogou.maps.Map(document.getElementById("map_canvas"),myOptions); }
地图属性了解
列举一下常用的一些属性比如:地图的移动、地图类型转换、跳转到指定城市
具体代码如下
<htmlxmlns="http://www.w3.org/1999/xhtml"> <headid="Head1"runat="server"> <title></title> <styletype="text/css"> html{height:auto;} body{height:auto;margin:0;padding:0;} #map_canvas{width:1000px;height:500px;position:absolute;} @mediaprint{#map_canvas{height:950px;}} </style> <scriptsrc="http://xiazai.jb51.net/201409/other/api_v2.5.1.js"type="text/javascript"></script> <script> varmap;//创建全局变量 window.onload=function(){ varmyOptions={zoom:10,center:newsogou.maps.Point(12956000,4824875)};//指定城市 map=newsogou.maps.Map(document.getElementById("map_canvas"),myOptions);//创建地图 } //setMapTypeId方法示例 functionsetMapTypeId(num){ //设置地图类型,如: //sogou.maps.MapTypeId.ROADMAP普通地图 //sogou.maps.MapTypeId.SATELLITE卫星地图 //sogou.maps.MapTypeId.HYBRID卫星和路网混合地图 //map.setMapTypeId(sogou.maps.MapTypeId.HYBRID) switch(num){ case1:map.setMapTypeId(sogou.maps.MapTypeId.ROADMAP);break;//普通地图 case2:map.setMapTypeId(sogou.maps.MapTypeId.SATELLITE);break;//卫星地图 case3:map.setMapTypeId(sogou.maps.MapTypeId.HYBRID);break;//卫星和路网混合地图 } } //panBy方法示例地图手动移动 functionpanBy(a,b){ map.panBy(a,b) } //setOptions方法示例显示指定地区 functionsetOptions(){ //同时设置地图中心、级别、类型 map.setOptions({center:newsogou.maps.Point(13522000,3641093),zoom:12,mapTypeId:sogou.maps.MapTypeId.ROADMAP}) } //setCenter方法示例显示指定的地区a、b为地图坐标,C为地图级别 functionsetCenter(a,b,c){ map.setCenter(newsogou.maps.Point(a,b),c) } //fitBounds方法示例跳转到指定的范围内 functionfitBounds(){ //设置一个故宫附近的范围 varbounds=newsogou.maps.Bounds(12955101,4824738,12958355,4827449); //将地图设置为可全部显示这个范围 //注:不是设置bounds为这个值,而是调整到合适的位置 map.fitBounds(bounds) } </script> </head> <body> <formid="form1"runat="server"> <inputvalue="普通地图"onclick="setMapTypeId(1)"type="button"/> <inputvalue="卫星地图"onclick="setMapTypeId(2)"type="button"/> <inputvalue="卫星和路网混合地图"onclick="setMapTypeId(3)"type="button"/> <inputvalue="向左移动"onclick="panBy(200,0)"type="button"/> <inputvalue="向右移动"onclick="panBy(-200,0)"type="button"/> <inputvalue="向上移动"onclick="panBy(0,200)"type="button"/> <inputvalue="向下移动"onclick="panBy(0,-200)"type="button"/> <inputvalue="向左上移动"onclick="panBy(200,200)"type="button"/> <inputvalue="上海"onclick="setOptions()"type="button"/> <inputvalue="天津"onclick="setCenter(13046000,4714250,10)"type="button"/> <inputvalue="故宫"onclick="fitBounds()"type="button"/> <divid="map_canvas"></div> </form> </body> </html>
地图描点属性
地图上很重要的属性,给地图添加描点,是常用的方法属性,
搜狗API提供两种描点填写形式默认描点和动态添加描点
默认描点添加:
varlocation=newsogou.maps.Point(12956000,4824875);//指定描点位置 varmap=newsogou.maps.Map(document.getElementById("map_canvas"),{});//初始化地图 varmarker=newsogou.maps.Marker({ position:location,//描点坐标 title:"描点",//描点名称 label:{visible:true,align:"BOTTOM"},//描点显示形式 map:map, });//添加描点到地图
动态描点添加
window.onload=function(){ //初始化地图 map=newsogou.maps.Map(document.getElementById("map_canvas"),{}); //为地图添加点击事件 sogou.maps.event.addListener(map,'click',function(event){ varmarker1=newsogou.maps.Marker({ position:event.point, map:map }); }); }
根据两描点测距
//获取类的唯一示例 functiongetInstance(a){ a.hasOwnProperty("_instance")||(a._instance=newa); returna._instance } //两点相连 functionLines(myLatlng,myPoint){ varconvertor=getInstance(sogou.maps.Convertor); vardistance=convertor.distance(myLatlng,myPoint); //两点链接 varline=newsogou.maps.Polyline({ path:[myLatlng,myPoint], strokeColor:"#FF0000", strokeOpacity:1.0, strokeWeight:1, title:parseInt(distance)+"米", map:map }); }
根据上述属性做了一个小的模块,地图上动态测距代码如下:
<htmlxmlns="http://www.w3.org/1999/xhtml"> <headid="Head1"runat="server"> <title></title> <styletype="text/css"> html{height:auto;} body{height:auto;margin:0;padding:0;} #map_canvas{width:1000px;height:500px;position:absolute;} @mediaprint{#map_canvas{height:950px;}} </style> <scriptsrc="http://xiazai.jb51.net/201409/other/api_v2.5.1.js"type="text/javascript"></script> <script> varmap;varnum;varListener; //获取类的唯一示例 functiongetInstance(a){ a.hasOwnProperty("_instance")||(a._instance=newa); returna._instance } window.onload=function(){ //初始化地图 map=newsogou.maps.Map(document.getElementById("map_canvas"),{}); } functionAddCj(){ varmypointh;varmyPoint; 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++; }); } functionDelCj(){ sogou.maps.event.removeListener(Listener) } //两点相连 functionLines(myLatlng,myPoint){ varconvertor=getInstance(sogou.maps.Convertor); vardistance=convertor.distance(myLatlng,myPoint); //两点链接 varline=newsogou.maps.Polyline({ path:[myLatlng,myPoint], strokeColor:"#FF0000", strokeOpacity:1.0, strokeWeight:1, title:parseInt(distance)+"米", map:map }); placeMarker(myLatlng,parseInt(distance)); } //动态添加描点,根据指定的坐标创建描点 functionplaceMarker(location,jl){ varclickedLocation=location; varmarker1=newsogou.maps.Marker({ position:location, title:jl+"米", label:{visible:true,align:"BOTTOM"}, map:map }); } functionMapclear(){ num=0; map.clearAll(); } </script> </head> <body> <formid="form1"runat="server"> <inputtype="button"value="测距"onclick="AddCj()"/> <inputtype="button"value="取消测距"onclick="DelCj()"/> <inputtype="button"value="清空"onclick="Mapclear()"/> <divid="map_canvas"></div> </form> </body> </html>
希望本文所述对大家的sogou地图开发有所帮助