高德地图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()来添加覆盖物。

工具栏

• 只有缩放组件了

定位按钮

• 还是老样子，自带的定位按钮是无法获取到它点击后的回调的，只能自己调用获取定位的方法然后去写回调，建议自己封装一个简单的定位按钮。

小结

• 常用的基本就这些了，后续如果有别的，继续再更新一下。