如何在 AngularJS 中异步加载谷歌地图?

问题描述

现在我已经找到了一种在此 SO Andy Joslin 的帮助下初始化 Google 地图的方法 initialize-google-map-in-angularjs，我正在寻找一种异步加载的方法一个 Google 地图对象.

Now that I have found a way to initialize Google Maps with the help of Andy Joslin in this SO initialize-google-map-in-angularjs, I am looking for a way to asynchronous load a Google Map Object.

我在 phonecat 项目中找到了如何执行此操作的示例.

I found an example of how to do this in the phonecat project.

注意本示例中 JS 文件的加载方式:索引异步.html

Notice how the JS files are loaded in this example: index-async.html

在加载到我的程序中的 Jade Scripts 部分中，我尝试了:

In my Jade Scripts partial that is loaded into my program I tried:

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']);
    });

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

When I do this and go to load the map page I get:

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

Google 地图现在作为服务加载的方式如下:

This is how Google Maps is being loaded now as a service:

'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 对我来说很新.

It appears that this should be returning a promise from what I recall reading. But this AngularJS is very new to me.

推荐答案

如果您在 AngularJS 应用程序中使用 jQuery，请查看此函数，该函数在加载 Google Maps API 时返回 promise:

If you using jQuery in your AngularJS app, check out this function which returns a promise for when the Google Maps API has been loaded:

https://gist.github.com/gbakernet/828536

我能够在 AngularJS 指令中使用它来按需延迟加载 Google 地图.效果很好:

I was able to use this in a AngularJS directive to lazy-load Google Maps on demand.Works a treat:

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(){...});`
                }
            }
        };
    }]);

这篇关于如何在 AngularJS 中异步加载谷歌地图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！