Error message: Uncaught TypeError: Cannot read properties of null (reading 'Md')
mapscallback=___onAPILoaded&v=1.4.20......&plugin=AMap.MarkerClusterer,AMap.Geocoder:212
Error location: MapContainer.vue lines 262-263
I have read many blogs on the Internet about the error reports of the Amap point aggregation plug-in AMap.MarkerClusterer, but almost all of them are about the plug-in rendering statement or version incompatibility. However, my own loading statement has no problem at all, so I am very confused as to why it occurs. Report an error. Although this error does not affect the operation, patients with obsessive-compulsive disorder still want to know what is wrong with their code.
(Nonsense: I didn’t see this error message in the point aggregation plug-in on the blog on the Internet, so this error message was completely debugged a little by myself and finally found the problem, so I thought of posting a blog to help novices avoid lightning. QAQ This bug actually happened yesterday It already existed, but yesterday I thought it was because the cluster was empty or null, but then I felt that the logic didn't make sense. The cluster must have been empty before loading, because it did not affect the running of the program, so I didn't give in yesterday. Later, I went to Fixed other bugs.)
Until today, I accidentally wanted to take a look at the code I wrote when I was learning the content of the Amap open platform. I found that the cluster plug-in was only loaded once in the code I wrote when I was learning the content of the Amap open platform .
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)In the example of point aggregation of the official website of Amap Open Platform, the cluster plug-in is only loaded once .
So I thought about trying to test the loading times of the point aggregation plug-in in my code, and found that it was loaded twice , and only the first time there was an error message, and the second time it ran normally without any errors.
After knowing that the error was reported during the first loading , I tried to find where the loading function was executed. I found that the first time it was executed in mounted , and the second time was executed in watch , because the data of the marker point is based on the data of watch. Rendered, so delete the map loading function in mounted and only keep asynchronous requests. After deleting it, I found that no errors were reported, which is great.
u1s1 feels that the Amap plug-in is very similar to echarts. Repeated rendering of the Amap plug-in will report an error, while repeated rendering of echarts will cause a warning.
Attached is the reference manual for the Amap open platform point aggregation plug-in:
Tool Class-Reference Manual-Map JS API | Amap Map API (amap.com)
And the official point aggregation sample address: