AngularJS -将谷歌地图脚本异步加载到多个地图的指令中
AngularJS -将谷歌地图脚本异步加载到多个地图的指令中
提问于 2014-06-16 22:49:15
我目前正在尝试在一个页面上加载多个谷歌地图。我不想在HTML代码中包含google地图API脚本，因为我不希望脚本被加载，除非地图在当前页面中。我希望我的地图在一个指令中被调用，该指令还将执行google map API脚本延迟加载。
所以我搜索并found a solution了一下，但我的问题是它只会加载一个地图，而不是其他地图。
我的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>和指令：
// Google Map
app.directive('googleMap', ['$window', '$q', function( $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);
}
// Lazy loading of the script
function lazyLoadApi(key) {
console.log('lazyLoadApi');
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;
}
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) ) {
console.log('-----');
// Initialize the map
$scope.initialize = function() {
console.log($scope.mapId);
$scope.location = new google.maps.LatLng($scope.lat, $scope.long);
$scope.mapOptions = {
zoom: 6,
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,
});
}
// Check if google map API is ready to run
if ( $window.google && $window.google.maps ) {
console.log('gmaps already loaded');
// Google map already loaded
$scope.initialize();
} else {
lazyLoadApi().then(function () {
// Promised resolved
console.log('promise resolved');
if ( $window.google && $window.google.maps ) {
// Google map loaded
console.log('gmaps loaded');
$scope.initialize();
} else {
// Google map NOT loaded
console.log('gmaps not loaded');
}
}, function () {
// Promise rejected
console.log('promise rejected');
});
}
}
}
};这是一个包含3个地图的jsFiddle，您将看到只加载了最后一个地图：
我猜我在我的作用域或处理承诺的方式上做错了什么，但我现在完全没有想法……
谢谢!(对不起，我的英语不是很好)
更新(应答后)
作为更新，这里是我想出的完整解决方案：
http://plnkr.co/edit/1NpquJ?p=preview (@莫里西·普朗克)
Google地图服务
// 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地图指令
// 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
});
}
}
};
}]);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>再次感谢莫里西
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-06-16 23:17:30
您在这里遇到了关于承诺和初始化的问题，我已经为您做了更清楚的说明
显然，jsfiddle已经被移除了，所以这里是有效的插入器：http://plnkr.co/edit/1NpquJ?p=preview
js
这是一个针对延迟加载gmaps的服务
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文件
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24246403
复制相关文章
相似问题