百度地图实现聚合点展示 baidu-地图vue.js

【百度地图实现聚合点展示】本篇文章介绍的是通过百度地图api实现聚合点的展示，实现效果如下：

文章图片

来看看它是怎么实现的（以vue为例）：

创建地图容器

this.baiduMapOut = new BMap.Map(document.getElementById(this.className));

设置中心点并且支持缩放

this.baiduMapOut.enableScrollWheelZoom(); this.baiduMapOut.centerAndZoom('中华人民共和国', 5);

画点

if (this.markerClusterer) { this.markerClusterer.clearMarkers(this.markers); } for (const point of points) { let imgurl = require('../../../../assets/images/dataMarket/location-little.png'); let iconStop = new BMap.Icon(imgurl, new BMap.Size(32, 34), { anchor: new BMap.Size(23, 20) }); let pointStop = new BMap.Point(point.lng, point.lat); this.points.push(pointStop); let markerStop = new BMap.Marker(pointStop, { icon: iconStop }); this.markers.push(markerStop); if (this.markers.length > 0) { this.markerClusterer = new BMapLib.MarkerClusterer(this.baiduMapOut, { markers: this.markers }); }