谷歌地图 - InvalidValueError: setMap: not an instance of Map答案

【问题标题】：Google maps - InvalidValueError: setMap: not an instance of Map谷歌地图 - InvalidValueError: setMap: not an instance of Map
【发布时间】：2019-10-26 19:16:23
【问题描述】：

我的代码如下：

var mapLatLng = new google.maps.LatLng(27, -83)
 var mapOptions = {
 zoom: 8,
 center: mapLatLng,
 draggable: true,
 mapTypeId: google.maps.MapTypeId.TERRAIN,
 gestureHandling: ‘cooperative’,
 minZoom: 7
 }

 this.map = new google.maps.Map(document.getElementById(‘map_canvas’), mapOptions);

 this.drawingManager = new google.maps.drawing.DrawingManager({
 drawingMode: google.maps.drawing.OverlayType.POLYGON,
 map: this.map
 )}

在我的html中我有

<div id =“map_canvas”></div>

我知道问题是什么，但我不知道如何解决它。我需要使用一个实用程序类来导入带有地点库的 google maps api。但是，在另一个实用程序类中，我必须从 google maps api 导入绘图和几何库。

我必须这样做，因为前者包含我的应用程序所需的组件，但前者没有我也需要的绘图和几何库。我无法编辑以前的实用程序类。如果可以的话，我只想将绘图和几何库添加到它。

我可以让它工作的唯一方法是导入谷歌地图 api 两次。问题是我从标题中得到了这个 setMap 错误。无论如何我可以在两次导入谷歌地图 api 时解决这个问题吗？

【问题讨论】：

不建议两次添加API。也许您应该重新评估使用该实用程序库的必要性。

标签： javascript google-maps google-maps-api-3

【解决方案1】：

两次调用Maps API可能会报错，比如这个JS：

您已在此页面上多次包含 Google Maps API。这可能会导致意外错误。

例如见"You have included the Google Maps API multiple times on this page" Error

您应该能够修改现有的 JavaScript API 调用以包含额外的库。例如，只需调用一次 API 并将所有这些库包含在请求中，如下所示：

https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,drawing,geometry

希望这会有所帮助！

【讨论】：