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

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

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

Answer 3

高德地图海量标记无法展示的问题可能由多种原因引起。以下是一些可能的原因和相应的解决方案：

1. 性能问题：当标记数量过多时，渲染所有标记可能会对性能产生较大影响。你可以尝试优化代码，例如减少不必要的渲染，使用更小的标记图标，或者考虑使用其他方式来展示大量数据，如聚类标记。
2. 内存限制：浏览器或设备可能有内存限制，导致无法渲染大量标记。你可以尝试在渲染标记之前进行内存管理，例如清理不再需要的变量或对象，或者分批渲染标记。
3. API限制：高德地图API可能有对标记数量的限制。你可以查看高德地图的官方文档，了解是否有关于标记数量的限制或建议。
4. 代码问题：代码中的某些错误或不合理的地方可能导致标记无法渲染。你可以仔细检查代码，确保标记数据的格式正确，并且没有逻辑错误。

针对你提供的代码，我注意到你在创建MassMarks对象时，只传递了data和style参数，而没有传递map参数。虽然你在后面通过massMarks.setMap(this.map)将标记设置到了地图上，但你可以尝试在创建MassMarks对象时直接传递map参数，如下所示：

var massMarks = new AMap.MassMarks(data, {  map: this.map, // 添加此行  zIndex: 5,  cursor: "pointer",  style: style,  zooms: [3, 14],});

这样可以确保标记在创建时就被设置到了正确的地图上，可能有助于解决渲染问题。

另外，你也可以尝试调整zooms参数的范围，确保标记在所需的缩放级别内可见。

如果以上建议仍然无法解决问题，你可能需要进一步检查代码和数据，或者查阅高德地图的官方文档和社区，寻求更具体的帮助。