如何在 angular-google-maps 2.2.1 中使用谷歌地图 API_KEY答案

【问题标题】：How to use google map API_KEY in angular-google-maps 2.2.1如何在 angular-google-maps 2.2.1 中使用谷歌地图 API_KEY
【发布时间】：2020-05-10 18:08:25
【问题描述】：

最近我正在开发一个于 2016 年开发的移动应用项目。目前约有 4500 名用户在使用它。它是使用 AngularJS (v 1.7.8) 和 IONIC (V1.1.1) 开发的。我们现在必须坚持使用这些旧版本。

它具有谷歌地图功能。
首先调用 google map java script API 的“geocode”功能，然后我们使用“angular-google-maps 2.2.1”中的“ui-gmap-google-map”指令来渲染地图。

现在它开始报错了。我们现在必须使用谷歌地图 API_KEY。

为了获取地理编码，应用程序正在调用这个谷歌地图 API。 https://maps.google.com/maps/api/geocode/json?address= 现在我们必须在 URL 中附加一个 API_KEY 才能使其工作。

在获取地理编码（lat 和 lng）后，我们将其传递给视图中的“ui-gmap-google-map”角度指令（“center”属性）以渲染地图。我猜这个“ui-gmap-google-map”在内部调用谷歌地图服务并传递地理编码，然后渲染地图。正在显示的地图上覆盖着灰色和“仅供开发”的水印。

现在的问题是，如何将相同的 API_KEY 传递给“ui-gmap-google-map”？

请帮助或告诉我一些方向。

非常感谢。

比布达塔

【问题讨论】：

标签： angularjs google-maps

【解决方案1】：

你应该切换到angularjs-google-maps

如果您需要将 API 密钥传递给 javascript，您可以在控制器中设置范围变量（例如 $scope.googleMapsUrl="https://maps.googleapis.com/maps/api/js?key =YOUR_KEY_HERE";)。这可以从您的应用中的一个常量值进行设置，以标准化 API 密钥以传递给 google 以供多个控制器使用。

【讨论】：