sogou地圖API用法實(shí)例教程

2019-11-20 14:09:29

字體：大中小

供稿：網(wǎng)友

本文實(shí)例講述了sogou地圖API應(yīng)用，是非常實(shí)用的技巧。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

地圖的初始化

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

<script src="http://xiazai.VeVB.COm/201409/other/api_v2.5.1.js" type="text/javascript"></script>

2、網(wǎng)站初始化加載事件：

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

創(chuàng)建一個(gè)id為map_canvas的div,自定義div樣式，網(wǎng)站運(yùn)行時(shí)地圖自動(dòng)加載；

具體代碼如下

<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.VeVB.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>

指定顯示莫城市地圖

關(guān)鍵代碼如下：

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

地圖屬性了解

列舉一下常用的一些屬性比如:地圖的移動(dòng)、地圖類型轉(zhuǎn)換、跳轉(zhuǎn)到指定城市

具體代碼如下

<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.VeVB.COm/201409/other/api_v2.5.1.js" type="text/javascript"></script><script>var map;//創(chuàng)建全局變量window.onload = function () {  var myOptions = { zoom: 10, center: new sogou.maps.Point(12956000, 4824875) };//指定城市 map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions);//創(chuàng)建地圖 }//setMapTypeId方法示例function setMapTypeId(num) {  //設(shè)置地圖類型，如： //sogou.maps.MapTypeId.ROADMAP 普通地圖 //sogou.maps.MapTypeId.SATELLITE 衛(wèi)星地圖 //sogou.maps.MapTypeId.HYBRID 衛(wèi)星和路網(wǎng)混合地圖 //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; //衛(wèi)星地圖 case 3: map.setMapTypeId(sogou.maps.MapTypeId.HYBRID); break; //衛(wèi)星和路網(wǎng)混合地圖 }}//panBy方法示例地圖手動(dòng)移動(dòng)function panBy(a, b) { map.panBy(a, b)}//setOptions方法示例顯示指定地區(qū)function setOptions() { //同時(shí)設(shè)置地圖中心、級別、類型 map.setOptions({ center: new sogou.maps.Point(13522000, 3641093), zoom: 12, mapTypeId: sogou.maps.MapTypeId.ROADMAP })}//setCenter方法示例 顯示指定的地區(qū) a、b為地圖坐標(biāo)，C為地圖級別function setCenter(a, b, c) { map.setCenter(new sogou.maps.Point(a, b), c)}//fitBounds方法示例 跳轉(zhuǎn)到指定的范圍內(nèi)function fitBounds() { //設(shè)置一個(gè)故宮附近的范圍 var bounds = new sogou.maps.Bounds(12955101, 4824738, 12958355, 4827449); //將地圖設(shè)置為可全部顯示這個(gè)范圍 //注：不是設(shè)置bounds為這個(gè)值，而是調(diào)整到合適的位置 map.fitBounds(bounds)}</script></head><body> <form id="form1" runat="server"> <input value="普通地圖" onclick="setMapTypeId(1)" type="button"/> <input value="衛(wèi)星地圖" onclick="setMapTypeId(2)" type="button"/> <input value="衛(wèi)星和路網(wǎng)混合地圖" onclick="setMapTypeId(3)" type="button"/> <input value="向左移動(dòng)" onclick="panBy(200,0)" type="button"/> <input value="向右移動(dòng)" onclick="panBy(-200,0)" type="button"/> <input value="向上移動(dòng)" onclick="panBy(0,200)" type="button"/> <input value="向下移動(dòng)" onclick="panBy(0,-200)" type="button"/> <input value="向左上移動(dòng)" 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>

地圖描點(diǎn)屬性

地圖上很重要的屬性，給地圖添加描點(diǎn)，是常用的方法屬性，

搜狗API提供兩種描點(diǎn)填寫形式默認(rèn)描點(diǎn)和動(dòng)態(tài)添加描點(diǎn)

默認(rèn)描點(diǎn)添加：

var location = new sogou.maps.Point(12956000, 4824875); //指定描點(diǎn)位置var map = new sogou.maps.Map(document.getElementById("map_canvas"), {});//初始化地圖var marker = new sogou.maps.Marker({ position: location,//描點(diǎn)坐標(biāo) title: "描點(diǎn)",//描點(diǎn)名稱 label: { visible: true, align: "BOTTOM" },//描點(diǎn)顯示形式 map: map,  });//添加描點(diǎn)到地圖

動(dòng)態(tài)描點(diǎn)添加

window.onload = function () { //初始化地圖 map = new sogou.maps.Map(document.getElementById("map_canvas"), {});//為地圖添加點(diǎn)擊事件sogou.maps.event.addListener(map, 'click', function (event) { var marker1 = new sogou.maps.Marker({ position: event.point,  map: map }); }); }

根據(jù)兩描點(diǎn)測距

//獲取類的唯一示例function getInstance(a) { a.hasOwnProperty("_instance") || (a._instance = new a); return a._instance}//兩點(diǎn)相連function Lines(myLatlng, myPoint) {  var convertor = getInstance(sogou.maps.Convertor); var distance = convertor.distance(myLatlng, myPoint); //兩點(diǎn)鏈接 var line = new sogou.maps.Polyline({ path: [myLatlng, myPoint], strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 1, title: parseInt(distance) + "米", map: map }); }

根據(jù)上述屬性做了一個(gè)小的模塊，地圖上動(dòng)態(tài)測距代碼如下：

<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.VeVB.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;   //為地圖添加點(diǎn)擊事件、點(diǎn)擊后顯示當(dāng)前坐標(biāo)并添加點(diǎn)擊描點(diǎn)   Listener = sogou.maps.event.addListener(map, 'click', function (event) {    if (num == 0) {     mypointh = myPoint = event.point; //獲取點(diǎn)擊位置的坐標(biāo)     }    else {     myPoint = mypointh;     mypointh = event.point; //獲取點(diǎn)擊位置的坐標(biāo)     }    Lines(mypointh, myPoint);    num++;   });  }  function DelCj() {   sogou.maps.event.removeListener(Listener)  }  //兩點(diǎn)相連  function Lines(myLatlng, myPoint) {    var convertor = getInstance(sogou.maps.Convertor);   var distance = convertor.distance(myLatlng, myPoint);   //兩點(diǎn)鏈接   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));  }  //動(dòng)態(tài)添加描點(diǎn)，根據(jù)指定的坐標(biāo)創(chuàng)建描點(diǎn)  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地圖開發(fā)有所幫助

上一篇：使用js dom和jquery分別實(shí)現(xiàn)簡單增刪改

下一篇：當(dāng)前流行的JavaScript代碼風(fēng)格指南