uni-app 高德地图markers点太多了卡顿

问题描述

因为一种方法套H5界面，访问后端接口要区号登录和登录凭证，另外一种按显示的区域显示图标的话和业务不是很合适，所以问一下各位大神有什么好的解决方法没有？

在处理 uni-app 中高德地图 markers 过多导致的卡顿问题时，可以通过以下几种技术手段进行优化。这些手段包括分页加载、减少DOM操作、使用虚拟列表等。以下是一个使用分页加载 markers 的示例代码，以减少一次性加载的 markers 数量，从而缓解卡顿现象。

示例代码：分页加载 markers

初始化页面数据

data() {
  return {
    map: null, // 高德地图实例
    markers: [], // 当前页面显示的markers
    allMarkers: [], // 所有markers数据
    pageIndex: 0, // 当前页码
    pageSize: 50, // 每页显示的markers数量
  };
},

地图初始化

mounted() {
  this.initMap();
  this.loadMarkers(this.pageIndex, this.pageSize);
},
methods: {
  initMap() {
    const self = this;
    const map = new AMap.Map('container', {
      resizeEnable: true,
      zoom: 11,
      center: [116.397428, 39.90923]
    });
    this.map = map;
  },
  loadMarkers(pageIndex, pageSize) {
    const start = pageIndex * pageSize;
    const end = start + pageSize;
    const markersToShow = this.allMarkers.slice(start, end);
    
    // 清除之前的markers
    if (this.markers.length > 0) {
      this.map.remove(this.markers);
    }
    
    // 添加新的markers
    this.markers = markersToShow.map(markerData => new AMap.Marker({
      position: markerData.position,
      content: markerData.content
    }));
    this.map.add(this.markers);
    
    // 更新页码
    this.pageIndex = pageIndex;
  },
  // 可以添加函数来加载所有数据到allMarkers，例如从服务器获取
  // loadAllMarkers() {...}
}

实现分页控制

可以在页面上添加按钮来控制分页，例如“上一页”和“下一页”：

<template>
  <view>
    <div id="container" style="width: 100%; height: 300px;"></div>
    <button @click="prevPage">上一页</button>
    <button @click="nextPage">下一页</button>
  </view>
</template>

methods: {
  prevPage() {
    if (this.pageIndex > 0) {
      this.pageIndex--;
      this.loadMarkers(this.pageIndex, this.pageSize);
    }
  },
  nextPage() {
    const totalPages = Math.ceil(this.allMarkers.length / this.pageSize);
    if (this.pageIndex < totalPages - 1) {
      this.pageIndex++;
      this.loadMarkers(this.pageIndex, this.pageSize);
    }
  }
}

通过这种方式，可以有效减少一次性加载到地图上的 markers 数量，从而缓解因 markers 过多导致的卡顿问题。当然，还可以结合其他优化手段，如使用虚拟列表等，进一步提升性能。