高德地图海量标记无法展示是什么问题？

Question

高德地图海量标记无法展示是什么问题？
当标记只有一千个左右的时候可以正常展示出来的，但是当标记为两千左右的时候，无法渲染出来标记，是一个都没有渲染出来，一点都无法入手。因为官网说什么使用海量标记上万个也有比较好的性能，但是我实际使用下来却是几千个都无法渲染出来。

 initAMap() {
      AMapLoader.load({
        key: "a34d5c1fd63e7fc1521bd56b3301d5ee", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: [116.397428, 39.90923], // 初始化地图中心点位置
          });

          var style = {
            url: "//vdata.amap.com/icons/b18/1/2.png", //图标地址
            size: new AMap.Size(11, 11), //图标大小
            anchor: new AMap.Pixel(5, 5), //图标显示位置偏移量，基准点为图标左上角
          };

          let mapList = getMap(1);
          console.log(mapList);
          let data = [];

          mapList.forEach((item) => {
            data.push({
              lnglat: [item.position[0], item.position[1]],
            });
          });

          var massMarks = new AMap.MassMarks(data, {
            zIndex: 5,
            cursor: "pointer",
            style: style,
            zooms: [3, 14],
          });

          massMarks.setMap(this.map);

          // const labelsLayer = new AMap.LabelsLayer({
          //   zooms: [3, 20],
          //   zIndex: 1000,
          //   // 开启标注避让，默认为 true，开启后标注会根据所在区域进行避让
          //   collision: false,
          //   // 开启标注淡入动画，默认开启
          //   // 开启后标注在地图上创建动画，默认动画时长300ms，动画效果为渐现
          //   animation: false,
          // });

          // const icon = {
          //   type: "image",
          //   image:
          //     "https://a.amap.com/jsapi_demos/static/demo-center/marker/express2.png",
          //   size: [24, 34], // 图标尺寸
          //   anchor: "center",
          // };

          // //设置文字对象
          // const text = {
          //   content: "", //要展示的文字内容
          //   direction: "right", //文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
          //   offset: [-20, -5], //在 direction 基础上的偏移量
          //   //文字样式
          //   style: {
          //     fontSize: 12, //字体大小
          //     fillColor: "#22886f", //字体颜色
          //     strokeColor: "#fff", //描边颜色
          //     strokeWidth: 2, //描边宽度
          //   },
          // };

          // // 获取随机地址经纬度
          // let mapList = getMap(2);
          // console.log(mapList);
          // const labelMarker = [];
          // mapList.forEach((item) => {
          //   labelMarker.push(
          //     new AMap.LabelMarker({
          //       name: "标注", //此属性非绘制文字内容，仅为标识使用
          //       position: [item.position[0], item.position[1]],
          //       zIndex: 2,
          //       rank: 1, //避让优先级
          //       icon: icon, //标注图标，将 icon 对象传给 icon 属性
          //       text: text, //标注文本，将 text 对象传给 text 属性
          //     })
          //   );
          // });

          // //添加一个 labelMarker
          // labelsLayer.add(labelMarker);

          // this.map.add(labelsLayer);
        })
        .catch((e) => {
          console.log(e);
        });
    },

Answer 1

你的点集合是异步获取吗？如果是，写个异步函数试吧

Answer 2

可以试试优化一下。通过地图比例来展示标记。比如地图比例较小 你可以合并多个小的标记为一个大的标记 反之就设置区域范围内可见的小标记即可。