更改高德地图自定义数据范围
在项目中遇到用高德地图中绘制海量图标，但是如果数据量太多的话，一次性绘制大量的图标marker，导致页面加载速度很慢。
这个问题，我想到在高德地图绘制一个透明的圆来作为用户查看数据的范围，在圆内显示部分数据，当用户点击圆范围之外的地图的话，以点击的位置的坐标作为圆范围的中心，以达到修改显示范围的目的，如此，每次高度地图只渲染部分数据，加快了页面的加载速度，还解决了图标过多，显得页面过于凌乱
请求方法.then(res=>{
AMapLoader.load({
key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [
"AMap.ToolBar", //工具条
"AMap.Geocoder",
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap) =>{
this.map = new AMap.Map("mapid", {
zoom: 14,
center: 地图中心,
});
res.data.map(item=>{
var marker = new AMap.Marker({
opacity: 1,
zIndex: 0,
cursor: "pointer",
position: [item.longitude, item.latitude], //经纬度位置
icon: new AMap.Icon({
size: new AMap.Size(36, 36), // 图标尺寸
image: require("@/assets/images/"), // Icon的图像
imageSize: new AMap.Size(36, 36), // 根据所设置的大小拉伸或压缩图片
imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
extData: {
id: item.firstaidMemberId, //设置marker点击时获取的数据，以便后续操作
},
}),
marker.setLabel({
direction: "top",
offset: new AMap.Pixel(10, 0), //设置文本标注偏移量
content: `${item.name}`, //设置文本标注内容
});
that.map.add(marker); //将marker添加到地图中
//marker点击事件
marker.on('click',(e)=>{
console.log(e.target.getExtData())
})
//将渲染好的marker填充到数组中，以便后续删除
that.markerList.push(marker)
})
})
// 渲染透明圆
var circle = new AMap.Circle({
center: new AMap.LngLat(lng, lat),
radius: 2000, //半径单位m
strokeColor: "#76D5C2", //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 1, //线粗细度
fillColor: "#4BB2FD", //填充颜色
fillOpacity: 0.35, //填充透明度
}); // 圆心位置
this.map.add(circle);
//地图点击
this.map.on("click", function (e) {
// console.log(
// e.lnglat.getLng(),
// e.lnglat.getLat(),
);
//清除之前的marker，渲染新的marker
that.map.remove(that.markerList);
//更改圆的位置
circle.setCenter([e.lnglat.getLng(), e.lnglat.getLat()]);
}
})