角度谷歌地图 api 密钥未通过

Question

我正在尝试使用 Angular 谷歌地图，我完成了 Angular 谷歌地图提供的快速设置

    .config(['$routeProvider','$locationProvider','uiGmapGoogleMapApiProvider,
        function($routeProvider,$locationProvider,uiGmapGoogleMapApiProvider) {
           // Other configurations
          uiGmapGoogleMapApiProvider.configure({
            key: ‘MY_GOOGLE_API_KEY’,
            v: ‘3.17’,
            libraries: 'weather,geometry,visualization'
          });
        }
    ]);

我在 Google API 控制台中设置了一个 API 密钥，但是当我加载页面时，我得到了一个 MissingKeyMapError。

Google Maps API 错误：MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error

我在 API 控制台中启用了 Google Javascript API。我对自己做错了什么感到茫然。任何帮助将不胜感激。

Answer 1

我解决了这个问题。原来我加载了 Google Maps API v3 两次。我正在将其加载到提供程序中

uiGmapGoogleMapApi.then(function(maps) {});

并加载脚本标签

<script src="https://maps.googleapis.com/maps/api/js"></script>

一旦我删除了脚本标签，它就起作用了！

感谢大家的帮助。

Answer 2

确保您使用了带有有效 API 密钥的密钥参数。按照此link 获取有关如何为您的项目获取正确 API 密钥的步骤。

1. 转到Google API Console。
2. 创建或选择一个项目。
3. 点击继续以启用 API 和任何相关服务。
4. 在 Credentials 页面上，获取 Browser key（并设置 API Credentials）。注意：如果您有一个现有的浏览器键，您可以 使用那个键。
5. 为防止配额被盗，secure your API key following these best practices。
6. （可选）启用计费。见Usage Limits 了解更多信息。

但是基于thread，问题是因为在使用这个库之前包含了谷歌地图 api 的流浪脚本标签。也可以查看这个相关的SO question。

希望这会有所帮助！