高德地图marker标点数据量太大造成卡顿的解决方案-CSDN博客

本文链接：https://blog.csdn.net/weixin_43860852/article/details/124628705

当使用高德地图API添加超过1000个marker时，页面可能会出现卡顿。为了解决这个问题，可以采用官方的MassMarks功能来处理海量点。通过创建MassMarks对象，设置样式数组和数据源，可以流畅地显示大量标点，同时支持点击和鼠标移入移出事件。示例代码展示了如何使用MassMarks并提供了官方文档链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

marker标点卡顿问题

问题说明

应用高德地图使用marker标点时，由于数据量大（>1000）就会造成页面卡顿，好几秒才能加载完成，并且页面也会卡顿

解决方案

使用官方提供的海量点MassMarks 可解决问题

直接上代码

//styleObjectArr 是标点样式（可多样式）
let styleObjectArr = [{
	url:xxx,						 // 图标地址
	size: new AMap.Size(16,25),      // 图标大小
	anchor:new AMap.Pixel(-8, -17)   // 偏移量
},{
	url:xxx2,						 // 图标地址
	size: new AMap.Size(16,25),      // 图标大小
	anchor:new AMap.Pixel(-8, -17)   // 偏移量
}]
//markers 是标点数据源
let markers = [{
	id: xxx,
	name: xxx,
	lnglat: [xxx,xxx],
	style:0          //这里的style为styleObjectArr中的下标
},{
	id: xxx,
	name: xxx,
	lnglat: [xxx,xxx],
	style:1          //这里的style为styleObjectArr中的下标
}]
var massMarks = new AMap.MassMarks(markers,{
   zIndex: 999, 	// 海量点图层叠加的顺序
   zooms: [3, 19],	 // 在指定地图缩放级别范围内展示海量点图层
   style: styleObjectArr    //多种样式对象的数组
 });
 // this.map为map实例，不添加标点事件可注释或删除
 var marker = new AMap.Marker({content: ' ', map: this.map});
 // 这里可以添加标点点击事件，不用可注释或删除
 massMarks.on("click", this.clickMarker);
 // 这里可以添加鼠标移入移出标点事件，不用可注释或删除
 massMarks.on('mouseover', function (e) {
   marker.setPosition(e.data.lnglat);
   marker.setLabel({content: e.data.name})
 });
 massMarks.on('mouseout', function (e) {
   marker.setLabel({content:''})
 });
 //将海量点massMarks注入map
 massMarks.setMap(this.map);

最后上官方demo地址

https://developer.amap.com/demo/jsapi-v2/example/mass-markers/massmarks 跳转

官方文档地址

https://developer.amap.com/api/javascript-api/guide/overlays/massmarker/ 跳转
https://developer.amap.com/api/javascript-api/reference/layer/#MassMarks 跳转