AngularJS，在加载Google Maps API时暂停

Question

我正在使用Angular Google Maps加载Google Maps API，但加载API脚本时会暂停3-4秒。所以页面上的所有内容都已加载 - ＆gt;暂停3-4秒 - ＆gt; API脚本开始加载 - ＆gt;地图显示。

看起来它只是在等待一些计时器事件：

Google Maps配置代码段：

  uiGmapGoogleMapApiProvider.configure({
    key: 'xxxxxxxxxx',
    v: '3',
    libraries: 'geocoder',
    preventLoad: false,
    china: false,
    transport: 'https'
  });

在此处加载地图：

    <div id="shopMap" ng-init="initShopMap()"></div>

通过此功能：

$scope.initShopMap = function() {
  if ($scope.shop.latitude && $scope.shop.longitude) {
    uiGmapGoogleMapApi.then(function(maps) {
      shopMap = new maps.Map(document.getElementById("shopMap"), {
        control: {},
        options: {
          draggable: true,
          scrollwheel: false
        },
        center: new maps.LatLng(0, 0),
        zoom: 14,
        marker: {
          options: {
            icon: {
              scaledSize: { width: 24, height: 36 },
              url: '/images/pm-shop-icon.png'
            }
          }
        }
      });

      directionsService = new maps.DirectionsService();

      initMarkers();
      $scope.showShopMap = true;
    });
  }
}

为什么会出现这种延迟的想法？非常感谢任何提示，谢谢✨

Answer 1

原来，这个项目中的api加载错误，index.htm中没有这行：

 <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

我想知道如果没有这一行，地图甚至可以工作：）