正在 AngularJS 中加载异步 Google 地图

Question

我正在尝试在我的 AngularJS 项目中延迟加载 Google 地图。当我检查时，我看到地图在 DOM 中异步加载，但它没有出现在我的 Chrome 浏览器的视口中。

我错过了什么？

这里是 plunker。 http://embed.plnkr.co/5LYp91Wl7xrJ1QcNEN2W/preview

这里是工厂和指令的 JS 代码：

(function() {
  'use strict';

  angular
    .module('myapp', [])
    .factory('mapsInit', mapsInitFactory)
    .directive('propertyMap', propertyMap);

  function mapsInitFactory($window, $q) {
    //Google's url for async maps initialization accepting callback function
    var asyncUrl = 'https://maps.googleapis.com/maps/api/js?callback=',
      mapsDefer = $q.defer();

    //Callback function - resolving promise after maps successfully loaded
    $window.googleMapsInitialized = mapsDefer.resolve; // removed ()

    //Async loader
    var asyncLoad = function(asyncUrl, callbackName) {
      var script = document.createElement('script');
      //script.type = 'text/javascript';
      script.src = asyncUrl + callbackName;
      document.body.appendChild(script);
    };

    //Start loading google maps
    asyncLoad(asyncUrl, 'googleMapsInitialized');

    //Usage: Initializer.mapsInitialized.then(callback)
    return {
      mapsInitialized: mapsDefer.promise
    };
  }

  function propertyMap(mapsInit) {
    return {
      restrict: 'E',
      scope: {
        mapId: '@id', // map ID
        lat: '@', // latitude
        long: '@' // longitude
      },
      link: function(scope) {
        // Simple check
        console.log(scope.mapId, scope.lat, scope.long);
        // Check if latitude and longitude are specified
        if (angular.isDefined(scope.lat) && angular.isDefined(scope.long)) {

          // Initialize the map
          var initialize = function() {

            var location = new google.maps.LatLng(scope.lat, scope.long);

            var mapOptions = {
              zoom: 12,
              center: location
            };

            var map = new google.maps.Map(document.getElementById(scope.mapId), mapOptions);

            new google.maps.Marker({
              position: location,
              map: map
            });
          };
          // Loads google map script
          mapsInit.mapsInitialized.then(function() {
            // Promised resolved
            initialize();
          }, function() {
            // Promise rejected
          });
        }
      }
    };

  }

})();

这里是html（style.css为空）：

<!DOCTYPE html>
<html ng-app="myapp">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-init="working = true">
  <h1>Async Google Maps</h1> AngularJS works: {{working}}
  <property-map id="map-12345" lat="45.53315412" long="-73.61803162"></property-map>
</body>

</html>

Answer 1

我觉得自己很傻，但我不得不为属性-map 添加一些样式 ;-)

property-map {
  display: block;
  background-color: #fafafa;
  height: 500px;
  width: 100%;
}

正在 AngularJS 中加载异步 Google 地图

Loading async Google Maps in AngularJS

javascript

google-maps

asynchronous

lazy-loading

angularjs