我改变了一些东西来让它工作:
您不再需要 google 地图的 api 密钥,这对于脚本 src 来说就足够了(请参阅Google 地图 API 密钥是什么):
<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
将“functioninitialize()”替换为“$scope.init()”并注释掉它所说的行:
//google.maps.event.addDomListener(window, 'load', initialize);
还要将 ng-init="init()" 添加到您的 html 中,如下所示:
<ion-header-bar class="bar-dark" ng-init="init()">
<h1 class="title">Map</h1>
</ion-header-bar>
我不知道为什么它不能与 domListener 一起使用,但在显示数据之前需要初始化数据(请参阅Google MAP API 未捕获类型错误:无法读取 null 的属性“offsetWidth”)。使用 ng-init 你可以实现这一点。
最终控制器应如下所示:
.controller('MapCtrl', function($scope, $ionicLoading, $compile) {
$scope.init = function() {
var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
//Marker + infowindow + angularjs compiled ng-click
var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
$scope.map = map;
};
// google.maps.event.addDomListener(window, 'load', initialize);
$scope.centerOnMe = function() {
if(!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function(pos) {
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
}, function(error) {
alert('Unable to get location: ' + error.message);
});
};
$scope.clickTest = function() {
alert('Example of infowindow with ng-click')
};
});
希望这有帮助!