AngularJS，在加载Google时暂停

Question

我使用角谷歌地图来加载Google，但是加载API脚本有3-4秒的暂停。因此，页面上的所有内容都加载了-> 3-4秒，暂停-> API脚本开始加载显示的->地图。

​

​

​

​

看起来它只是在等待某个计时器事件：

​

Google配置片段：

  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>

我想知道没有这一行地图是如何工作的:)