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

Question

我尝试在多个位置中包含 Google 地图。

对于一个位置 Iframe 工作正常。 我不知道如何在 Iframe 中实现多个位置。 所以我尝试了 AGM。 用于 AGM 的相同 APIKey 我也。但得到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的密钥时遇到了同样的错误。 结果证明 Google 更改了服务所需的权限，但没有更改错误消息； 我必须授予对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 限制下。

希望这可以帮助！

Answer 3

如果这对某些人有用，我遇到了同样的问题。

• 转到 Google Cloud Platform 中的凭据选项卡
• 然后单击地图 > 您会看到 API 限制的下拉菜单

所有Maps [...] API都已启用，但有些地图 API 的名称中不包含“地图”，我只是添加了它们。