高德地圖API 2.0的常見的一些用法

最近把公司的項目里的高德地圖api升級到了2.0，發現有一些變動的地方，先記下來

事件綁定

• 全部采用object.on()的形式去綁定事件，解綁事件是off。

定位

• 定位不再使用之前的事件綁定的形式，而是直接在方法中傳入回調的方式來獲取

geolocation.getCurrentPosition((status, data) => {
    // 定位成功
    if(status == 'complete') {
        const { position: { lng, lat  } } = data;
        typeof callback === 'function' && callback(lng, lat);
    } else { // 定位失敗
        console.log(data)
        typeof callback === 'function' && callback('', '');
    }
});

點聚合

• 首先是類名的變化，MarkerClusterer變成了MarkerClusterer
• 再就是非聚合點的渲染方式的變化，之前是在renderClusterMarker中根據它上下文的count來判斷是否是展開的點，可以來自定義樣式，現在只能通過傳入renderMarker來自定義marker的樣式。

this.cluster = new window.AMap.MarkerCluster(
    this.map,
    markerList,
    {
        gridSize: 120,
        zoomOnClick: true,
        renderClusterMarker: (context) => this.renderClusterMarker(context, markerList.length),
        renderMarker: (context) => this.renderSingleMarker(context)
     }
);

靈活點標記

• 基本沒啥改動的

const zoomStyleMapping = {
    2: 0,
    3: 0,
    4: 0,
    5: 0,
    6: 0,
    7: 0,
    8: 0,
    9: 0,
    10: 0,
    11: 0,
    12: 0,
    13: 0,
    14: 0,
    15: 1,
    16: 1,
    17: 1,
    18: 1,
    19: 1,
    20: 1,
};
const styles = [
    {
       icon: {
           img: icon,
           size: isActive ? [20, 20] : [10, 10], //可見區域的大小
           anchor: 'bottom-center', //錨點
           fitZoom: 10, //最合適的級別
           scaleFactor: 2, //地圖放大一級的縮放比例系數
           maxScale: 2, //最大放大比例
           minScale: 1 //最小放大比例
       }
   },
   {
       label: {
           content: this.getCustomDom(m),
           position: 'BM'
       }
   }
 ];
const marker = new window.AMap.ElasticMarker({
    position: lnglat,
    styles: styles,
    zoomStyleMapping: zoomStyleMapping,
    zIndex: isActive ? 2 : 1
});

覆蓋物

• setMap方法被廢棄，只能用this.map.add()來添加覆蓋物。

工具欄

• 只有縮放組件了

定位按鈕

• 還是老樣子，自帶的定位按鈕是無法獲取到它點擊后的回調的，只能自己調用獲取定位的方法然后去寫回調，建議自己封裝一個簡單的定位按鈕。

小結

• 常用的基本就這些了，后續如果有別的，繼續再更新一下。