Angularjs谷歌地图API集成
问题描述:
我想添加一个谷歌地图在角JS ...并一直在挣扎。 我不想使用其中一种角度依赖性,但模拟Google JS API site上的“异步延迟”。Angularjs谷歌地图API集成
我对Angularjs来说很新颖,但是让事情分配给控制器范围。很肯定这只是一些愚蠢的,但不知道是什么...任何帮助将是真棒:-)
(function() {
'use strict';
app.controller('travelCtrl', ['$scope', function($scope) {
$scope.injectScript = function(element) {
var scriptTag = angular.element(document.createElement('script'));
scriptTag.attr('charset', 'utf-8');
scriptTag.attr('src', 'https://maps.googleapis.com/maps/api/js?key=MYKEY');
element.append(scriptTag);
return {
link: function(scope, element) {
injectScript(element)}}};
$scope.initMap = function() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('kc-map'), {
zoom: 4,
center: uluru
});
};
}]);
})();
HTML
<div ng-controller="travelCtrl" id="kc-map"></div>
答
想通了......
app.controller('travelCtrl', ['$scope', function($scope) {
$scope.initialize = function() {
$scope.mapOptions = {
zoom: 8,
center: new google.maps.LatLng(22.649907498685803, 88.36255413913727)
};
$scope.map = new google.maps.Map(document.getElementById('kc-map'), $scope.mapOptions);
}
$scope.loadScript = function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyD-5e8hV-uCuE1pEgTyMhk_gJJPK2f3F5A&callback=initialize';
document.body.appendChild(script);
setTimeout(function() {
$scope.initialize();
}, 500);
}
}]);
将此添加到外部div。
ng-init="loadScript()"
回答感谢this post
恰好是不工作怎么办?地图未加载? – kappaallday
地图未加载。页面上没有错误消息,只是不加载。 –
做到这一点:'angular.element(element).append(scriptTag);'MKEY似乎无效api key tho – kappaallday