我正在尝试在我的AngularJS项目中延迟加载Google地图.我在检查时看到地图在DOM中加载了异步,但它没有出现在我的Chrome浏览器的视口中.
我错过了什么？
这是掠夺者. http://embed.plnkr.co/5LYp91Wl7xrJ1QcNEN2W/preview
这是工厂和指令的JS代码：
(function() {
'use strict';
angular
.module('myapp', [])
.factory('mapsInit', mapsInitFactory)
.directive('propertyMap', propertyMap);
function mapsInitFactory($window, $q) {
//Google's url for async maps initialization accepting callback function
var asyncUrl = 'https://maps.googleapis.com/maps/api/js?callback=',
mapsDefer = $q.defer();
//Callback function - resolving promise after maps successfully loaded
$window.googleMapsInitialized = mapsDefer.resolve; // removed ()
//Async loader
var asyncLoad = function(asyncUrl, callbackName) {
var script = document.createElement('script');
//script.type = 'text/javascript';
script.src = asyncUrl + callbackName;
document.body.appendChild(script);
};
//Start loading google maps
asyncLoad(asyncUrl, 'googleMapsInitialized');
//Usage: Initializer.mapsInitialized.then(callback)
return {
mapsInitialized: mapsDefer.promise
};
}
function propertyMap(mapsInit) {
return {
restrict: 'E',
scope: {
mapId: '@id', // map ID
lat: '@', // latitude
long: '@' // longitude
},
link: function(scope) {
// Simple check
console.log(scope.mapId, scope.lat, scope.long);
// Check if latitude and longitude are specified
if (angular.isDefined(scope.lat) && angular.isDefined(scope.long)) {
// Initialize the map
var initialize = function() {
var location = new google.maps.LatLng(scope.lat, scope.long);
var mapOptions = {
zoom: 12,
center: location
};
var map = new google.maps.Map(document.getElementById(scope.mapId), mapOptions);
new google.maps.Marker({
position: location,
map: map
});
};
// Loads google map script
mapsInit.mapsInitialized.then(function() {
// Promised resolved
initialize();
}, function() {
// Promise rejected
});
}
}
};
}
})();
这是html(style.css为空)：
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-init="working = true">
<h1>Async Google Maps</h1> AngularJS works: {{working}}
<property-map id="map-12345" lat="45.53315412" long="-73.61803162"></property-map>
</body>
</html>
解决方法:
我觉得自己很傻,但我只需要为物业地图添加一些风格;-)
property-map {
display: block;
background-color: #fafafa;
height: 500px;
width: 100%;
}