對接高德地圖API的總結

近期專案中需要對接高德地圖做圖形（畫一個區域範圍），所以把用的對接知識總結一下，先看個簡單的效果圖： 

當然多看點別人的也不錯，別人家的demo, 酸奶小妹

用 [TOC]來生成目錄：

---

引用JS（高德地圖WEB端JSApi）

引入高德地圖的js高德地圖JS介面 
只要不是太複雜的功能可以不需要key值的，高德的功能大多不需要付費，但是沒有key可能在某些方面有許可權限制（由於我有key所以沒感受到許可權，呵呵）。

http://webapi.amap.com/maps?v=1.4.0&key=key值&plugin=AMap.MouseTool,AMap.PolyEditor,AMap.ToolBar

• 1

為了方便載入和頁面的載入優化，推薦將外掛引用的方式如上，&plugin=外掛1，外掛2，外掛3；高德允許你用一個藉口引用多個外掛，當然不用就不引入。 
解釋幾個簡單個概念： 
點標記： 地圖上的一個點（包含座標，title，事件甚至還有其他你想不到的東西） 
覆蓋物： 你在地圖上看到的所有東西都是覆蓋物（除了地圖載入出來的預設的東西，地圖上的點也是覆蓋物）

開始渲染地圖

首先要在頁面上生成一個地圖。

 var  map = new AMap.Map('containers', {
      resizeEnable: true, // 可以去掉
      zoom: 14, // 地圖的層級，值的大小決定地圖載入出來的比例尺的大小
      center: [116.39, 39.9], // 預設地圖載入的總心點座標，這是北京
      cursor: 'hand' // 滑鼠在地圖上的表現形式
  });
 // 還有我們可能要預設一下地圖載入出來時是全國範圍的
 AMap.plugin('AMap.Geocoder', function () {
      var geocoder = new AMap.Geocoder({
         city: "全國"// 城市，預設：“全國”
         });
  });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

containers是地圖所在的div的id，如上會預設生成一個地圖區域。 

map是這個地圖的例項化物件，往後對地圖的所有操作、事件監聽等都要通過這個地圖物件（map）來實現。 
AMap是高德的地圖類，後面還會用到它，所以記住它。 
也許你在載入地圖完成後想通過JS更改地圖的比例尺 
setZoomAndCenter（）是一個不錯的選擇。

map.setZoomAndCenter（15,center）; // 地圖的層級，中心店座標

• 1

獲取地圖中被點選的地方的經緯度和地址

map.on('click',function(e){
console.log(e.lnglat.getLng(),e.lnglat.getLat());// 我提醒過記住lng和lat引數的
  geocoder.getAddress(e.lnglat, function () {
        console.log(result.regeocode.formattedAddress); // 地址
    });
});

• 1
• 2
• 3
• 4
• 5
• 6

幾個常見的工具

以上是高德地圖的基礎功能，後續的其他功能需要藉助高德提供的工具/外掛去實現（還記得引入的js裡plugin後面的值嗎？）。

可以回頭看看我們是否引入了ToolBar這個外掛。

    //顯示控制元件
 map.plugin(["AMap.ToolBar"], function () {
          map.addControl(new AMap.ToolBar());
 });

• 1
• 2
• 3
• 4

Marker

點標記

// 預設一個點標記在地圖中心點
maker = new AMap.Marker({
    map: map, // 提醒過這個地圖物件的
    position:[116.39，39.9] // lng , lat 記住這2個經緯度的簡寫 
});

• 1
• 2
• 3
• 4
• 5

更多引數

屬性/函式	值/引數	個人理解
setMap()	null/map	主要用來清空點標記，或者把點標記載入到地圖中，注意map物件
extData	唯一值	如果你想定義多個點標記用這個引數作為唯一標識是不錯的選擇
setExtData()		與上面的這個屬性功能一樣，只是函式為了後續改變用的
setTitle(title:String)	title	點標記的標題，當然你可以getTitle()
getPosition()/setPosition([lng,lat])	經緯度	相信你會用到的，希望還記得lng，lat這個2個引數的含義
setClickable(clickable:Boolean )/getClickable( )	function(){}	設定點標記是支援滑鼠單擊事件,最好寫回撥函式

// 我想留個demo會更好
marker.setTitle('這是一個點標記');
marker.getPosition(); // 返回 116.39（lng），39.9（lat）,陣列形式的，注意我再次強調了lng和lat

• 1
• 2
• 3

刪除點標記還有一種方式：

map.remove(marker);

• 1
• 2

滑鼠工具

MouseTool，強大到無法想象。 
要畫圖的話，它是基礎呢。

mouseTool = new AMap.MouseTool(map)
drawPolygon = MouseTool.polygon(); // 滑鼠畫圖的物件，不會使用這個物件，但是要例項化MouseTool.polygon（）

• 1
• 2

方法	解釋
marker( options：MarkerOptions)	畫點標記，滑鼠點選地圖會畫出點標記
polygon( options：PolygonOptions)	滑鼠點選會畫出多邊形，右擊或者雙擊結束（畫圖必備）
polyline( options：PolylineOptions)	畫直線或者折線
circle( options：CircleOptions)	畫圓,很不方便
close( Boolean true/fasle)	這是最重要的方法，true清除覆蓋物，false則不是
draw	這是個事件，與click、mouseDown類似

// 來個demo, 滑鼠在地圖上畫了之後獲取畫的圖形的座標，在這之前需要例項化mouseTool.polygon()方法
 AMap.event.addListener(mouseTool, 'draw', function(e) { 
   arr = e.obj.getPath();//獲取路徑座標
});
// 畫圖結束,關閉
mouseTool.close();

• 1
• 2
• 3
• 4
• 5
• 6

雖然MouseTool很強大，但是僅靠它也不能做太多事，需要其他的工具來配合，所以說到底這只是一個強大的輔助（34D的奶媽），但是皮脆啊。

折線、多邊形編輯

AMap.PolyEditor 外掛

AMap.PolyEditor( Map, Object);// 建構函式
// 也許我的程式碼更具有說服力
editors = {};
editors._polygon=(function(){
    return new AMap.Polygon({
           map: map,
           path: [[lng,lat],[lng,lat],[lng,lat],[lng,lat]],// arr 陣列，  arr = e.obj.getPath();
           strokeColor: "#0000ff",
           strokeOpacity: 1,
           strokeWeight: 3,
           fillColor: "#f5deb3",
           fillOpacity: 0.35
       });
})();
editors._polygonEditor= new AMap.PolyEditor(map, editors._polygon);
// 生成的覆蓋物（圖形）
     editors._polygonEditor.open(); // 可被編輯狀態
     editors._polygonEditor.close();// 關閉編輯狀態，然後取經緯度
      arr =  editors._polygon.getPath();

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

也許還有人需要做軌跡回放或者折線.

事件	引數	說明
addnode	MapsEvent	通過滑鼠在折線上增加一個節點或在多邊形上增加一個頂點時觸發此事件
adjust	MapsEvent	滑鼠調整折線上某個節點或多邊形上某個頂點的位置時觸發此事件
removenode	MapsEvent	通過滑鼠在折線上刪除一個節點或在多邊形上刪除一個頂點時觸發此事件
end	type,target}	在呼叫close方法時，觸發該事件，target即為編輯後的折線/多邊形物件

實踐是最好的老師

點聚合:AMap.MarkerClusterer

個人認為這個意義不大。

事件監聽

地圖上覆蓋物的監聽

// 事件監聽
AMap.event.addDomListener(document.getElementById(''), 'click', function () {
// 操作
});
 // js觸發
 document.getElementById('').click();

• 1
• 2
• 3
• 4
• 5
• 6

地圖監聽：

map.on('click',function(){
// 左擊操作
});

map.on('rightclick',function(){
// 右擊操作
});

map.on('dblclick',function(){
// 雙擊操作
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

文件監聽

   document.body.onmouseup = function(e){ 
   // 操作
  if( e.button==2){
  // 左擊 操作
  }else if(e.button==3){
  // 沒記錯的話是右擊
  }
   };

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

物件的事件監聽

AMap.event.addListener(物件，‘事件’,function(){
// 回頭看看我們用過的，畫圖時
});

• 1
• 2
• 3

移除監聽事件

removeListener（）；// addDomlistener/addlistener 都能移除，用的不多

• 1

有用的引數

extData 多個相同覆蓋物的唯一標識的不錯選擇 
marker.setMap(null);與map.clearMap() 
hasOwnProperty()，物件的這個方法去判斷屬性是不錯的

更多

如果要控制覆蓋物的個數，推薦使用計數器，並把物件放入陣列中，然後使用extData區標識，而對於不必要的操作加把鎖就能搞定了。

var lock =true ;
map.on('click',function(){
if(lock == true){
// 操作1
}else if(lock == false){
// 操作2
lock = true;
}
});
map.on('dbclick',function(){
lock = false;
});