Question

我是Angular和Maps的新手，但是我想尝试Angular Google Maps。

在阅读quickstart时，我在第3点感到困惑：

通过以下两种方式之一包含Google Maps API v3：


Google Maps SDK Async Loader v2.0.0中的新功能

Google表示正在使用

<script>
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?
                                             key=YOUR_API_KEY&callback=initMap">

quiqkstart还建议第二个选项：

直接加载到您的HTML页面。例如：
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>

如果 second 选项已清除， first 会让我感到困惑。

第一个和第二个选项之间的差异只是将 async defer 添加到script代码？
应该使用API密钥？在Angular模块的配置中或在谷歌地图脚本中？

PS。

code sample the dev team gave as example没有澄清这个问题，因为他们根本没有使用任何密钥进行地图初始化......

Answer 1

在第一种情况下，只要map-script加载异步，就会提供一个回调（initMap），它将被调用。您可以以编程方式配置地图。

在第二种情况下，脚本将被加载，稍后可以由angular-google-maps使用。您必须通过网址配置地图。

Answer 2

不同之处在于API密钥，您的帐户可以从Google控制台中绑定到其他库。对于某些域，您需要API密钥和其他库（方向，地理编码，e ...）。对脚本资源的调用可以保持简单。必须在控制台中管理库。

如果没有API密钥，您也可以使用其他库加载gm。但是，您的域名仅限于一天的请求数量。

//maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry&callback=asyncGoogleMaps

如果您只是在页面的head部分使用脚本标记，则加载库时几乎没有问题。

但是如果你异步工作，你将不得不创建一个全局函数来映射脚本初始化。否则它将无法工作，因为脚本无法写入DOM。

如果您需要将API密钥传递给javascript，可以在控制器中设置范围变量

$scope.googleMapsUrl="http://maps.google.com/maps/api/js?v=3.20&client=XXXXenter-api-keyXXXX";

可以在应用中使用常量值进行设置，以便将API密钥标准化，以便为多个控制器传递给Google。

<div map-lazy-load="http://maps.google.com/maps/api/js"
     map-lazy-load-params="{{googleMapsUrl}}">    
    <map center="41,-87" zoom="3"></map>
</div>

阅读angular-js-googlemaps。

Angular谷歌地图混淆（doc）加载地图

2 个答案: