首页 > 编程语言> > javascript – 在AngularJS中加载异步Google地图

javascript – 在AngularJS中加载异步Google地图

2019-06-28 11:23:05 作者：互联网

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

我错过了什么？

这是掠夺者. 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>

解决方法:

我觉得自己很傻,但我只需要为物业地图添加一些风格;-)

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

标签：javascript,angularjs,asynchronous,google-maps,lazyload
来源： https://codeday.me/bug/20190628/1315116.html