个人中心
gpt4 book ai didi

javascript - 在 AngularJS 中加载异步谷歌地图

转载 作者：塔克拉玛干 更新时间：2023-11-02 20:58:54 25 4
gpt4 key购买 nike

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

我错过了什么？

这里是 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>

最佳答案

我觉得自己很傻，但我只需要向 property-map 添加一些样式 ;-)

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

关于javascript - 在 AngularJS 中加载异步谷歌地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32553455/

25 4 0
文章推荐： javascript - 主干删除和新 View 不会重置其属性数组内容
文章推荐： javascript - Angular - 模块化定义所有服务
文章推荐： 安卓工作室 "Attempt to invoke virtual method on a null object reference"
文章推荐： 如果在括号内则要排除的 Javascript 正则表达式
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com