错误：使用 Google 地图 API 的 AGM 地图中出现 ApiTargetBlockedMapError

Question

我尝试将谷歌地图包含在多个位置。

对于一个位置，Iframe 工作正常。我不知道如何在 Iframe 中实现多个位置。所以我尝试了年度股东大会。我也将相同的 APIKey 用于 AGM。但是出现Google Maps JavaScript API 错误： ApiTargetBlockedMapError错误。

这是我的 IFrame 代码

<iframe src="https://www.google.com/maps/embed/v1/place?q=11.0443324,77.04292389999999&key=MY_APIKEY" width="98%" height="100%" frameborder="0"></iframe>

对于 AGM 在 NgModule 中添加密钥

AgmCoreModule.forRoot({AgmCoreModule.forRoot({
     apiKey: 'MY_APIKEY',
     }) 
<agm-marker *ngFor="let loc of mSupplierLocationList" [label]="loc.label" [latitude]="loc.latitude" [longitude]="loc.longitude" >
</agm-marker>
</agm-map>

Answer 1

我在使用已经有权使用JavaScript API. 事实证明，谷歌改变了一项服务所需的权限，但没有改变错误消息；我必须授予密钥访问权限Places API，它修复了错误。

Answer 2

请注意，AGM 使用 JavaScript API。不是嵌入 API（您在 iframe 中调用时没有问题的 API）。

如果您使用相同的 API 密钥来调用这两个 API，则可能会出现此问题。

这个ApiTargetBlockedMapError意味着：

Maps JavaScript API 尚未获得使用的 API 密钥的授权。请在 Google Cloud Platform Console 中检查您的 API 密钥的 API 限制设置。

因此，首先确保您的项目启用了JavaScript API ，然后检查它是否列在您的 API 密钥的API 限制下。

希望这可以帮助！