AngularJS-加载多个地图的google地图脚本异步输入指令

我目前正试图在一个页面上加载多个谷歌地图。 我不想在HTML代码中包含GoogleMapAPI脚本，因为我不想加载脚本，除非地图在当前页面中。 我希望在单个指令中调用我的映射，该指令也将执行GoogleMapAPI脚本延迟加载

所以我四处搜索，并对其进行了一些调整，但我的问题是，它只会加载一个地图，而不会加载其他地图

我的HTML如下所示：

<div id="mapParis" class="google-map" lat="48.833" long="2.333"></div>
<div id="mapWashington" class="google-map" lat="38.917" long="-77.000"></div>
<div id="mapTokyo" class="google-map" lat="35.667" long="139.750"></div>

这是一个包含3个映射的JSFIDLE，您将看到只加载了最后一个映射：

我猜我在我的范围或承诺的处理方式上做错了什么，但我现在已经完全没有想法了

谢谢！（很抱歉我的英语不太好）

---

更新（回答后） 作为更新， 下面是我提出的完整解决方案：
（@maurycy plunker）

谷歌地图服务 谷歌地图指令 HTML使用示例

---

再次感谢maurycy

您在承诺和初始化方面遇到了问题，我已经为您清理了

显然，JSFIDLE已被删除，因此这里是正在工作的plunker：

js 这里是一个用于延迟加载GMAP的服务

app.service('lazyLoadApi', function lazyLoadApi($window, $q) {
  function loadScript() {
    console.log('loadScript')
    // use global document since Angular's $document is weak
    var s = document.createElement('script')
    s.src = '//maps.googleapis.com/maps/api/js?sensor=false&language=en&callback=initMap'
    document.body.appendChild(s)
  }
  var deferred = $q.defer()

  $window.initMap = function () {
    deferred.resolve()
  }

  if ($window.attachEvent) {
    $window.attachEvent('onload', loadScript)
  } else {
    $window.addEventListener('load', loadScript, false)
  }

  return deferred.promise
});

---

然后该指令执行它应该执行的操作，仅对map有效，不要在任何其他逻辑上加载js文件

谢谢，它工作得非常好。我只是想知道，从逻辑上讲，为什么它没有像我在上一个提琴中做的那样工作（这将帮助我更好地理解Angular）。如果运行plunker，您会在控制台日志中看到所有3条指令都已初始化，但只有一条承诺（最后一条）已解决，并运行$scope.initialize（）小提琴在任何例子中都不起作用。你们能不能提供一个完整的示例

$window.initMap

函数无法识别

延迟的

，因为它不在它的作用域中请更新fiddle希望看到它运行，链接已断开。

// Lazy loading of Google Map API
app.service('loadGoogleMapAPI', ['$window', '$q', 
    function ( $window, $q ) {

        var deferred = $q.defer();

        // Load Google map API script
        function loadScript() {  
            // Use global document since Angular's $document is weak
            var script = document.createElement('script');
            script.src = '//maps.googleapis.com/maps/api/js?sensor=false&language=en&callback=initMap';

            document.body.appendChild(script);
        }

        // Script loaded callback, send resolve
        $window.initMap = function () {
            deferred.resolve();
        }

        loadScript();

        return deferred.promise;
    }]);

// Google Map
app.directive('googleMap', ['$rootScope', 'loadGoogleMapAPI', 
    function( $rootScope, loadGoogleMapAPI ) {  

        return {
            restrict: 'C', // restrict by class name
            scope: {
                mapId: '@id', // map ID
                lat: '@',     // latitude
                long: '@'     // longitude
            },
            link: function( $scope, elem, attrs ) {

                // Check if latitude and longitude are specified
                if ( angular.isDefined($scope.lat) && angular.isDefined($scope.long) ) {

                    // Initialize the map
                    $scope.initialize = function() {                                        
                        $scope.location = new google.maps.LatLng($scope.lat, $scope.long);

                        $scope.mapOptions = {
                            zoom: 12,
                            center: $scope.location
                        };

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

                        new google.maps.Marker({
                            position: $scope.location,
                            map: $scope.map,
                        });
                    }

                    // Loads google map script
                    loadGoogleMapAPI.then(function () {
                        // Promised resolved
                        $scope.initialize();
                    }, function () {
                        // Promise rejected
                    });
                }
            }
        };
    }]);

<div id="mapParis" class="google-map" lat="48.833" long="2.333"></div>
<div id="mapWashington" class="google-map" lat="38.917" long="-77.000"></div>
<div id="mapTokyo" class="google-map" lat="35.667" long="139.750"></div>

app.service('lazyLoadApi', function lazyLoadApi($window, $q) {
  function loadScript() {
    console.log('loadScript')
    // use global document since Angular's $document is weak
    var s = document.createElement('script')
    s.src = '//maps.googleapis.com/maps/api/js?sensor=false&language=en&callback=initMap'
    document.body.appendChild(s)
  }
  var deferred = $q.defer()

  $window.initMap = function () {
    deferred.resolve()
  }

  if ($window.attachEvent) {
    $window.attachEvent('onload', loadScript)
  } else {
    $window.addEventListener('load', loadScript, false)
  }

  return deferred.promise
});