如何在AngularJS中异步加载谷歌地图？ [英] How to asynchronously load a google map in AngularJS?
问题描述
现在我已经在 Andy Joslin 的帮助下找到了一种初始化Google地图的方法，一个href =https://stackoverflow.com/questions/11180750/initialize-google-map-in-angularjs> initialize-google-map-in-angularjs ，我正在寻找一种方法来异步加载一个Google Map对象。
我找到了一个如何在 phonecat project。
注意在这个例子中加载了JS文件： index-async.html
脚本（src ='js / lib / angular'）在我的Jade脚本部分内容中加载了我的程序）
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（）{
//完成后，执行引导角应用程序
angular.bootstrap（document，['ofm']）;
}）;
当我这样做并去加载地图页时，我得到：
从被忽略加载的
外部脚本调用document.write（）被忽略。
这就是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;
}）;
函数初始化（map_id，lat，lng，zoom）{
var myOptions = {
zoom：8，
center：new google.maps.LatLng（lat ，lng），
mapTypeId：google.maps.MapTypeId.ROADMAP
};
返回新的google.maps.Map（$（map_id）[0]，myOptions）;
}
看来这应该是我回想起来的一个承诺。但是这个AngularJS对我来说是非常新鲜的。
解决方案如果你在你的AngularJS应用中使用jQuery，看看这个函数返回一个承诺用于Google Maps API的加载时间： $ b https://gist.github.com/gbakernet/828536
我能够在AngularJS指令中使用它可以按需延迟加载Google地图。
作品：
angular.module（'mapModule'）//用法：data-google-map
.directive（'googleMap'，['$ window'，function（$ window）{
return {
restrict：'A'，
link：function（scope，element， attrs）{
//如果Google地图已经存在，那么只需要初始化我的地图
（$ window.google& $ window.google.maps）{
initGoogleMaps（）;
} else {
loadGoogleMapsAsync（）;
}
函数loadGoogleMapsAsync（）{
// loadGoogleMaps（）== https：/ / jQuery函数/ /gist.github.com/gbakernet/828536
$ .when（loadGoogleMaps（））
//加载Google地图时，添加InfoBox - 这是可选的
.then（function（） {
$ .ajax（{ url：/resources/js/infobox.min.js，dataType：script，async：false}）;
}）
.done（function（）{
init_GoogleMaps（）;
}）;
};
函数initGoogleMaps（）{
//在这里加载你的谷歌地图的东西
//记住在范围内包含范围变量$ apply（function（）{... }）;`
}
}
};
}]）;
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.
I found an example of how to do this in the phonecat project.
Notice how the JS files are loaded in this example: index-async.html
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.
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);
}
It appears that this should be returning a promise from what I recall reading. But this AngularJS is very new to me.
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
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中异步加载谷歌地图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
