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

工具栏

只有缩放组件了

定位按钮

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

小结

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwwgjg.html