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

2019-06-28 11:23:05 阅读：243 来源： 互联网

标签：javascript angularjs asynchronous google-maps lazyload

我正在尝试在我的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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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