使用Google Maps时遭遇Uncaught ReferenceError: MarkerWithLabel is not defined错误的求助

看起来你遇到的核心问题是旧的MarkerWithLabel脚本托管链接已失效，而新版的库又和你基于jQuery的老项目不兼容。我来帮你一步步解决：

为什么之前的链接都不行？ #

• rawgit.com已经停止服务，所以第一个链接直接返回404；
• googlecode.com的SVN仓库早就迁移并停止维护，第二个链接自然无法访问；
• 新版的@googlemaps/markerwithlabel是重写的现代版本，不再暴露全局的MarkerWithLabel类，你的老代码写法无法直接兼容。

解决方案：使用兼容旧版的可靠CDN链接 #

你需要加载和原有代码写法兼容的旧版MarkerWithLabel库，可以用cdnjs提供的稳定CDN链接，它专门托管这类经典前端库：

1. 调整脚本加载顺序 #

必须先加载Google Maps API，再加载MarkerWithLabel，确保依赖的google.maps对象已存在：

<!-- 保留你的Google Maps API链接（替换为自己的key） -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIza...................&language=en&sensor=false&libraries=geometry,places&ext=.js"></script>
<!-- 加载兼容旧版的MarkerWithLabel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/google-maps-utility-library-v3/4.0.2/markerwithlabel/markerwithlabel.min.js"></script>

2. 验证加载状态 #

打开浏览器开发者工具的「网络」标签，检查两个脚本的请求状态：

• 确认没有404或加载失败的情况；
• 确保MarkerWithLabel脚本在Google Maps API之后完成加载。

3. 备用方案：本地托管脚本 #

如果担心CDN不稳定，你可以：

1. 下载markerwithlabel.min.js文件到本地；
2. 将文件放到项目的静态资源目录（比如/js/libs/）；
3. 本地引用脚本：

<script src="/js/libs/markerwithlabel.min.js"></script>

测试你的代码 #

完成上述步骤后，再执行创建标记的代码：

marker = new MarkerWithLabel({
  position: new google.maps.LatLng(locations[i][1], locations[i][2]),
  map: this.map,
  labelContent: j,
  labelAnchor: new google.maps.Point(15, 65),
  labelClass: "labels",
  labelInBackground: false,
  id : Arr[i],
  zIndex:100,
  icon: myApp.pinSymbol(marker_color)
});

此时MarkerWithLabel应该能被正确识别，不会再抛出ReferenceError了。

内容的提问来源于stack exchange，提问作者adhirath wcities