我尝试使用带有Ionic的谷歌地图来实现地图。我按照Link中的编码进行了操作 但我得到的只是一个黑屏,不知道我哪里出错了。请帮忙
这是控制器
angular.module('starter', ['ionic'])
.controller('MapCtrl', function($scope, $ionicLoading, $compile) {
function initialize() {
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')
};
});
这是html文件
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>
<body ng-controller="MapCtrl">
<ion-header-bar class="bar-dark" >
<h1 class="title">Map</h1>
</ion-header-bar>
<ion-content>
<div id="map" data-tap-disabled="true"></div>
</ion-content>
<ion-footer-bar class="bar-dark">
<a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
</ion-footer-bar>
</body>
请帮忙。
答案 0 :(得分:25)
我改变了一些事情以使其发挥作用:
你不再需要谷歌地图的api密钥,这对于脚本src就足够了(见Whats the Google Maps API Key):
<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
将“function initialize()”替换为“$ 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 Uncaught TypeError: Cannot read property 'offsetWidth' of null)。使用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')
};
});
希望这有帮助!
答案 1 :(得分:13)
或只是替换此
google.maps.event.addDomListener(window, 'load', initialize);
这个
ionic.Platform.ready(initialize);
参考http://codepen.io/mircobabini/developer/ionic-google-maps-nightly
答案 2 :(得分:2)
如果您使用的是最新版本的Ionic,在部署Android时可能会遇到空白屏幕,但是当您在网络浏览器中运行解决方案时,您会看到地图。 要解决此问题,您需要添加白名单插件,运行:离子插件添加cordova-plugin-whitelist 。
答案 3 :(得分:0)
在github上查看这个项目
http://angular-ui.github.io/angular-google-maps/#!/
它使用Angular.js指令为Google Maps功能的很大一部分提供API。
答案 4 :(得分:0)
您可以使用为angularjs完成的插件angularjs-google-maps(ngmap)。 它适用于离子。 它使您能够使用谷歌地图v3。
答案 5 :(得分:0)
我通过设置in:
解决了这个问题<ion-content ng-controller="MapCtrl">
<div id="map" data-tap-disabled="true"></div>
</ion-content>
然后你必须这样做:
.controller('MapCtrl', function($scope, $ionicLoading) {
google.maps.event.addDomListener(window, 'load', function() {
var newLatlng = new google.maps.LatLng(53.5000, -113.4300);
var mapOptions = {
center: newLatlng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
navigator.geolocation.getCurrentPosition(function(pos) {
map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
var myLocation = new google.maps.Marker({
position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
map: map,
title: "My Location"
});
});
$scope.map = map;
});
});