报错信息：Uncaught TypeError: Cannot read properties of null (reading 'Md')
mapscallback=___onAPILoaded&v=1.4.20......&plugin=AMap.MarkerClusterer,AMap.Geocoder:212
报错位置：MapContainer.vue 262-263行
查看了网上很多关于高德地图点聚合插件AMap.MarkerClusterer报错的博客，但是几乎都是关于插件渲染语句或者是版本不兼容的问题，但是自己这个加载语句又完全没有问题，就很纳闷为什么会出现报错，虽然这个报错不影响运行，但是强迫症患者还是想知道自己的代码出了什么问题。
（废话：在网上的博客上没有看到点聚合插件出现这个报错信息，所以这个报错信息完全是自己一点点调试最后发现问题所在，所以想到发一篇博客帮新手避避雷。QAQ这个bug其实昨天就已经存在，但是昨天以为是因为cluster为空，或者是为null导致的，但是后来又觉得逻辑说不通，加载之前cluster肯定为空，因为不影响程序的运行，所以昨天没有死磕，后来去改别的bug了。）
直到今天无意间想看看自己之前学习高德开放平台时的代码，发现自己之前学高德开放平台内容时写的代码里面cluster这个插件只加载了一次。
console.log(cluster)
cluster = new AMap.MarkerClusterer(map, markers, {
gridSize: 80,
renderClusterMarker: function (context) {
var count = markers.length;
var factor = Math.pow(context.count / count, 1 / 18);
var div = document.createElement("div");
var Hue = 180 - factor * 180;
var bgColor = "hsla(" + Hue + ",100%,50%,1)";
var fontColor = "hsla(" + Hue + ",100%,20%,1)";
var borderColor = "hsla(" + Hue + ",100%,40%,1)";
var shadowColor = "hsla(" + Hue + ",100%,50%,1)";
div.style.backgroundColor = bgColor;
var size = Math.round(
30 + Math.pow(context.count / count, 1 / 5) * 20
);
div.style.width = div.style.height = size + "px";
div.style.border = "solid 1px " + borderColor;
div.style.borderRadius = size / 2 + "px";
div.style.boxShadow = "0 0 1px " + shadowColor;
div.innerHTML = context.count;
div.style.lineHeight = size + "px";
div.style.color = fontColor;
div.style.fontSize = "14px";
div.style.textAlign = "center";
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div);
}, // 自定义聚合点样式
});
console.log(cluster)高德开放平台官网点聚合例子中cluster这个插件只加载了一次，
于是就想着尝试测试了一下自己的代码中点聚合插件的的加载次数，发现加载了两次，而且只有第一次加载的时候有报错信息，第二次是正常运行，没有任何报错。
知道是第一次加载报错以后，我尝试去找加载函数在哪执行过，发现第一次是在mounted里面执行，第二次是在watch里面执行，因为marker点的数据是根据watch的数据进行渲染的，所以删除mounted里面加载地图函数，只保留异步请求。删掉以后发现不报错了，就很棒。
u1s1感觉高德地图插件就和echarts很像，高德地图插件重复渲染会报错，echarts重复渲染会出现警告。
附上高德开放平台点聚合插件参考手册：
工具类-参考手册-地图 JS API | 高德地图API (amap.com)
以及官方点聚合样例地址：