优化vue-baidu-map渲染多个marker卡顿的问题(vue2,vue3同理)

Note_han

已于 2023-12-16 14:55:31 修改

阅读量1.2k

点赞数 11

文章标签： vue.js javascript

于 2023-12-15 14:56:02 首次发布

本文链接：https://blog.csdn.net/m0_56823974/article/details/135016895

版权

vue项目中使用百度地图，我们通常会用到vue-baidu-map,vue3也可以用vue-baidu-map-3x

在使用地图中，我们需要在地图上标出位置，此时我们会用到bmMarker组件，通过v-for遍历得到我们想要标识的坐标

数据量不多的情况下是没什么问题的，当时随着数据量增多，会造成页面卡顿，解决办法也挺简单，大概有3种

1 使用海量点去标出坐标位置组件 BmPointCollection

<baidu-map class="map" @init="addPoints" :center="{ lng: 105.000, lat: 38.000 }" :zoom="4">
      <bm-point-collection :points="points" shape="BMAP_POINT_SHAPE_STAR" color="red" size="BMAP_POINT_SIZE_SMALL" @click="clickHandler"></bm-point-collection>
</baidu-map>

<script setup>
const points = ref([]);

const clickHandler = (e) => {
  alert(`单击点的坐标为：${e.point.lng}，${e.point.lat}`);
};

const addPoints = () => {
  const pointAll = [];
  for (var i = 0; i < 1000; i++) {
    const position = { lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21 };
    pointAll.push(position);
  }
  points.value = pointAll;
};
</script>

优点：只渲染一次，速度快，流畅度好
缺点：无法自定义样式

2 使用点聚合 BmlMarkerClusterer

<baidu-map class="map" center="中国" :scroll-wheel-zoom="true" :double-click-zoom="true">
      <bml-marker-clusterer :averageCenter="true" :styles="styles">
        <bm-marker v-for="marker of markers" :key="marker" :position="{lng: marker.lng, lat: marker.lat}" @dragend="updateMarker($event, marker)" :dragging="true"></bm-marker>
      </bml-marker-clusterer>
</baidu-map>

优点：样式可以自定义，缩放后会将范围内的点渲染1个点
缺点：聚合后不方便查看，数据过多时同样会有一定的卡顿

3 查询可视区域坐标，筛选出可视区域内的点再去渲染

<baidu-map @ready="onReady" >
	<bm-marker
          v-for="(item, index) in markerList"
          :key="index"
          :position="{ lng: item.lng, lat: item.lat }"
          :title="item.name"
    ></bm-marker>
</baidu-map>

data(){
	return{
      // 地图实例
      map: null,
      // 可视区域示例
      bounds: null,
	}
},
computed:{
    markerList() {
      if (!this.bounds || !this.datalist.length) return []
      //可视区域左下角
      let SouthWest = this.bounds.getSouthWest()  
      //可视区域右上角                                                                                                                                                       				
      let NorthEast = this.bounds.getNorthEast();   
      let markerList = []
      // 获取区域内的点
      this.datalist.forEach(item => {
        if (item.lng >= SouthWest.lng &&
          item.lng <= NorthEast.lng &&
          item.lat >= SouthWest.lat &&
          item.lat <= NorthEast.lat) {
          markerList.push(item)
        }
      })
      return markerList
    }
},
methods: {
    onReady({ map }) {
      this.map = map
      //获取可视区域
      this.bounds = map.getBounds()
      // 监听地图的缩放和拖拽
      map.addEventListener('dragend',this.getBounds)
      map.addEventListener('zoomend',this.getBounds)
    },
    // 获取地图的可视区域
    getBounds() {
      if (!this.map) return
      this.bounds = this.map.getBounds()
    }
  },
  destroyed() {
    if (this.map) {
      this.map.removeEventListener("dragend", this.getBounds)
      this.map.removeEventListener("zoomend", this.getBounds)
    }
  }