Vue使用百度地图实现聚合的效果(vue-baidu-map)

安装插件：yarn add vue-baidu-map

在main.js中全局引入密钥（在百度开发者中心注册）：

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {ak: 'your_app_key' // 百度地图秘钥
})

代码实现：

<template><baidu-map id="allmap" :zoom="mapZoom" :center="mapCenter" class="allmap"  :scroll-wheel-zoom="true"></baidu-map>
</template>
<script type="text/javascript">export default{data() {return {map: null,mapCenter:{ lng: 121.508483, lat: 31.289045 },mapZoom:13,},}mounted(){this.getList()this.initMap()},methods: {// 初始化地图initMap() {const that = this// GL版命名空间为BMapGL  创建Map实例that.map = new BMapGL.Map("allmap");// 初始化地图,设置中心点坐标和地图级别that.map.centerAndZoom(new BMapGL.Point(that.mapCenter.lng, that.mapCenter.lat), 5);  //开启鼠标滚轮缩放that.map.enableScrollWheelZoom(true);    // 设置地图类型为地球模式 that.map.setMapType(BMAP_EARTH_MAP); // 监听地图层级that.map.addEventListener("zoomend", function(e) {var ZoomNum = that.map.getZoom();if (ZoomNum <= 6) {that.getqingdanList(30)} else if (ZoomNum > 6 && ZoomNum < 10) {that.getList(50) // 设置像素聚合的距离阈值为 50 像素} else {that.getList(100) // 设置像素聚合的距离阈值为 50 像素}});},pixelCluster(markers, distance) {// 先清除之前的详细点位信息// if (this.map != null && this.map.getOverlays() != null && this.map.getOverlays().length > 0) {//   this.map.clearOverlays()// }let clusters = []for (let i = 0; i < markers.length; i++) {let cluster = [markers[i]]for (let j = i + 1; j < markers.length; j++) {const pixel1 = this.map.pointToPixel(new BMapGL.Point(markers[i].lng, markers[i].lat))const pixel2 = this.map.pointToPixel(new BMapGL.Point(markers[j].lng, markers[j].lat))const pixelDistance = Math.sqrt(Math.pow(pixel1.x - pixel2.x, 2) + Math.pow(pixel1.y - pixel2.y, 2))if (pixelDistance < distance) {cluster.push(markers[j])markers.splice(j, 1)j--}}clusters.push(cluster)}// 创建自定义图标,本地的图片var myIcon = new BMapGL.Icon('src/assets/img/biaoqian.png', new BMapGL.Size(23, 25), {      anchor: new BMapGL.Size(10, 25), });// 在地图上显示聚合后的数据clusters.forEach(cluster => {const center = this.getClusterCenter(cluster)// 获取对一个的qingdanIdconst qingdanId = this.getClusterQingdanId(cluster)const label = new BMapGL.Label(cluster.length, {offset: new BMapGL.Size(15, -30)})//文本标注样式，transform为X轴平移，即文本居中显示label.setStyle({color: "#fff",//backgroundColor: "rgba(0, 0, 0, 0.5)",backgroundColor: "rgba(0, 0, 0, 0.3)",borderRadius: "10px",padding: "0 10px",fontSize: "14px",lineHeight: "20px",border :"0",transform:'translateX(-50%)'});const marker = new BMapGL.Marker(center, {icon: myIcon})// 这里用于其它方法marker.qingdanId = {qingdanId: qingdanId}// 主要用于清除数据：根据id清除marker.myId = "shouyetubiao";marker.setLabel(label)this.map.addOverlay(marker)})},getClusterCenter(cluster) {let totalLng = 0let totalLat = 0cluster.forEach(marker => {totalLng += parseFloat(marker.lng)totalLat += parseFloat(marker.lat)})const centerLng = totalLng / cluster.lengthconst centerLat = totalLat / cluster.lengthreturn new BMapGL.Point(centerLng, centerLat)},getClusterQingdanId(cluster) {let qingdanId = null;cluster.forEach(marker => {qingdanId = marker.qingdanId})return qingdanId},getqingdanList(xiangsu) {// 根据名称移除指定覆盖物if (this.map != null && this.map.getOverlays() != null && this.map.getOverlays().length > 0) {this.removeOverlayById("shouyetubiao")}this.$http({url: this.$http.adornUrl('/qingdan/list'),method: 'get',}).then(({data}) => {if (data.code === 0) {this.qingdanList = data.qingdanList}})this.pixelCluster(this.qingdanList, xiangsu)  },// 根据id删除覆盖物removeOverlayById(id) {var overlays = this.map.getOverlays();overlays.forEach(overlay => {if(overlay.myId === id) {this.map.removeOverlay(overlay)}});},} }
</script>