Google maps api 3 如何在AngularJS中异步加载google地图？

现在，我已经找到了一种方法来初始化谷歌地图的帮助下，在这所以，我正在寻找一种方法来异步加载谷歌地图对象

我在项目中找到了一个这样做的例子

注意本例中JS文件的加载方式：

在加载到我的程序中的Jade脚本部分中，我尝试了：

script(src='js/lib/angular/angular.js')
script(src='js/lib/script/script.min.js')

script
  $script([
    'js/lib/angular/angular-resource.min.js',
    'js/lib/jquery/jquery-1.7.2.min.js',
    'http://maps.googleapis.com/maps/api/js?key=AIzaSyBTmi_pcXMZtLX5MWFRQgbVEYx-h-pDXO4&sensor=false',
    'js/app.js',
    'js/services.js',
    'js/controllers.js',
    'js/filters.js',
    'js/directives.js',
    'bootstrap/js/bootstrap.min.js'
    ], function() {
      // when all is done, execute bootstrap angular application
      angular.bootstrap(document, ['ofm']);
    });

当我这样做并加载地图页面时，我得到：

A call to document.write() from an asycrononously-loaded 
external script was ignored.

这就是谷歌地图现在作为服务加载的方式：

'use strict';

var app = angular.module('ofm.services', []);

app.factory('GoogleMaps', function() {

  var map_id  = '#map';
  var lat     = 46.87916;
  var lng     = -3.32910;
  var zoom    = 15;
  var map     = initialize(map_id, lat, lng, zoom);

  return map;
});

function initialize(map_id, lat, lng, zoom) {
  var myOptions = {
    zoom : 8,
    center : new google.maps.LatLng(lat, lng),
    mapTypeId : google.maps.MapTypeId.ROADMAP
  };
  return new google.maps.Map($(map_id)[0], myOptions);
}

---

看来，这应该是从我记得的阅读中得到的回报。但是这个AngularJS对我来说是非常新的。

如果您在AngularJS应用程序中使用jQuery，请查看此函数，它会在加载Google Maps API时返回一个承诺：

我能够在AngularJS指令中使用它来根据需要延迟加载Google地图。 工作是一种享受：

angular.module('mapModule') // usage: data-google-map
    .directive('googleMap', ['$window', function ($window) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                // If Google maps is already present then just initialise my map
                if ($window.google && $window.google.maps) {
                    initGoogleMaps();
                } else {
                    loadGoogleMapsAsync();
                }

                function loadGoogleMapsAsync() {
                    // loadGoogleMaps() == jQuery function from https://gist.github.com/gbakernet/828536
                    $.when(loadGoogleMaps())
                        // When Google maps is loaded, add InfoBox - this is optional
                        .then(function () {
                            $.ajax({ url: "/resources/js/infobox.min.js", dataType: "script", async: false });
                        })
                        .done(function () {
                            initGoogleMaps();
                        });
                };

                function initGoogleMaps() {
                    // Load your Google map stuff here
                    // Remember to wrap scope variables inside `scope.$apply(function(){...});`
                }
            }
        };
    }]);

---

以下是我在不使用jQuery的情况下提出的解决方案： （）

---

看看这个，我认为它更可靠

    var deferred = $q.defer();
                        var script = document.createElement('script');

                        $window.initMap = function() {
                            //console.log("Map  init ");

                            deferred.resolve();
                        }
                        script.src = "//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&callback=initMap";
                        document.body.appendChild(script);
                        return deferred.promise;

---

为了促进这方面的进展，我在这里创建了一个git项目：并将它推到了这里：。我在googlegroups中启动了一个线程：当异步加载mapsapi库时，必须提供一个带有

callback=

query参数的回调函数。否则，API加载程序将使用

document.write（）

，这在异步调用中不起作用。中的迷你库为您添加了这个参数，这就是为什么它可以在这样的异步加载情况下工作。Eek，混合Angular和jQuery@甜菜根甜菜根打赌你的屁股是我干的！目前，使用AngularJS加载脚本并不容易，Google Maps API也不支持本地的承诺。我提出了一个非常充分的解决方案；如果你有更好的，那就让我们看看吧！：）格弗里，我接受你的观点，我没有说这不合理，我只是说“eek”。我还没有尝试过，但是AngularJS的$q不能按照q.js将jQuery承诺强制转换成自己的承诺吗？如果是这样，那么在

loadGoogleMapsAsync（）

中，除了

$.ajax（…）

表达式之外，所有表达式都可以使用$q编写，这在Angular.js模块中似乎更合适。另外，您是否应该

返回$ajax（…）

？否则（a）

initGoogleMaps（）

可能就在

内。然后（）

回调，以及（b）用户可以在

infobox

可用之前开始与地图交互。@beetrootbeetrootbeetroot我根本没有使用过

$q

，因为我对Angular还是个新手，尽管我想你可以很容易地把它关掉，是的。如果你找到一个有效的解决方案，请随时更新我的答案。至于你的a&b，那就离题了。

    var deferred = $q.defer();
                        var script = document.createElement('script');

                        $window.initMap = function() {
                            //console.log("Map  init ");

                            deferred.resolve();
                        }
                        script.src = "//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&callback=initMap";
                        document.body.appendChild(script);
                        return deferred.promise;