sogou地圖API用法實例教程教程

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> sogou地圖API用法實例教程教程

sogou地圖API用法實例教程教程

編輯：關於JavaScript

本文實例講述了sogou地圖API應用，是非常實用的技巧。分享給大家供大家參考。具體實現方法如下：

地圖的初始化

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

<script src="http://xiazai.cnblogs.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.cnblogs.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.cnblogs.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.cnblogs.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

Javascript中的數組常用方法解析: 前言　Array是Javascript構成的一個重要的部分，它可以用來存儲字符串、對象、函數、Num
Vue.js快速入門教程: 像AngularJS這種前端框架可以讓我們非常方便地開發出強大的單頁應用，然而有時候Angular這
Bootstrap前端開發案例二: 我接著前面的一篇布局接著寫，前一篇我已經完成了導航條和廣告的布局。開始繼續碼起來：我想最終實現的效果

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章