离子地图控制器没有得到加载
问题描述:
我有一个5选项卡的应用程序之一,其中包含一个map.The地图只加载浏览时直接在url栏。否则,似乎控制器没有加载,因为我确定了一些控制台日志。由于该应用将在移动设备上运行,地图页面将永远不会首先加载,因此我需要为此进行修复。我认为控制器会在点击标签时被调用,但似乎并非如此。离子地图控制器没有得到加载
控制器
.controller('MapCtrl', function($scope, $ionicLoading, $compile) {
//console.log("Map controller");
function initialize() {
var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//console.log('placing map');
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')
};
})
查看
<ion-view view-title="Directions">
<ion-content>
<div id="map" class="card" data-tap-disabled="true">
</div>
</ion-content>
</ion-view>
标签
<ion-tab title="Directions" icon-off="ion-ios-location-outline" icon-on="ion-ios-location" href="#/tab/directions">
<ion-nav-view name="tab-directions"></ion-nav-view>
</ion-tab>
路由器
.state('tab.directions', {
url: '/directions',
views: {
'tab-directions': {
templateUrl: 'templates/tab-directions.html',
controller: 'MapCtrl'
}
}
})
请问问题,有更多的信息我可以给你。
答
我有同样的问题。输入视图时执行该功能。 我加了google.maps.event.trigger(map,'resize');在$ scope.map = map之后;因为刷新视图后只加载地图。
这是我的控制器:
.controller('MapsController', function($scope, $ionicLoading){
$scope.$on("$ionicView.enter", function(scopes, states) {
var myLatlng = new google.maps.LatLng(37.3000, -120.4833);
var mapOptions = {
center: myLatlng,
zoom: 16,
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;
google.maps.event.trigger(map, 'resize');
});
});
显示您tabs.html? – Muhsin
请将ng-contoller加入您的,如 ,这不是一个好的方法。只适用于调试 –
Muhsin
@Muhsin但是这是在路由器状态。我试过了,它的行为相同 – Lonergan6275