Google Maps API中MarkerClusterer未定义的问题求助

我最近遇到个闹心的问题，想请大家帮忙看看：我做的地图用了AdvancedMarkerElements来展示标记，结果只要标记数量到几百个，浏览器直接卡得动不了。本来想加MarkerClusterer来优化性能，可不管我怎么试都搞不定，现在都有点怀疑自己了😅

我试过好几种方式引入不同来源的MarkerClusterer库，也翻了一大堆示例代码，但每次最后都会弹出类似MarkerClusterer is not defined的错误，实在不知道哪里出问题了。

我整理了几个可能的解决方向，你可以试试： #

• 先确认库的引入顺序和方式：如果是用脚本标签引入，一定要保证MarkerClusterer的脚本在Google Maps主API之后加载。比如：

  <script async src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=marker"></script>
  <script async src="对应版本的MarkerClusterer脚本"></script>
  

  要是用ES模块开发，就得用正确的import语句，比如：

  import { MarkerClusterer } from '@googlemaps/markerclusterer';
  

• 检查版本兼容性：AdvancedMarkerElements是Google Maps的新特性，旧版的MarkerClusterer可能不支持它，一定要用适配新API的MarkerClusterer版本，别拿老版本硬凑。
• 排查全局变量问题：有些版本的MarkerClusterer不会把类挂载到全局window对象上，如果用脚本标签引入的话，得确认脚本是否正确导出了全局的MarkerClusterer，或者直接改用模块引入的方式更稳妥。
• 最后检查拼写：别笑，有时候真的是手滑拼错了，比如把MarkerClusterer写成MarkerCluster或者大小写搞错，仔细核对下代码里的类名。

先从引入顺序和版本这两点开始排查吧，这是最容易踩坑的地方。

内容来源于stack exchange