现在我已经找到了一种在以下方法的帮助下初始化 Google 地图的方法安迪·乔斯林 https://stackoverflow.com/users/1397051/andy-joslin在这个SO在 angularjs 中初始化 google-map-in-angularjs https://stackoverflow.com/questions/11180750/initialize-google-map-in-angularjs,我正在寻找一种异步加载 Google 地图对象的方法。
我在中找到了如何执行此操作的示例phonecat https://github.com/angular/angular-phonecat项目。
请注意本示例中 JS 文件的加载方式:索引-async.html https://github.com/angular/angular-phonecat/blob/00a07064623f1c0df7e03c5e38aa976695b5c899/app/index-async.html
在加载到我的程序中的 Jade Scripts 部分中,我尝试了:
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.
这就是 Google 地图现在作为服务加载的方式:
'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 对我来说很新。