[英]In an Ionic app, Google Maps only loads when page is refreshed, but not when coming from another page,
我试图在Ionic应用程序中显示Google Maps街景,但无法正常工作。 当我从另一个页面转到该页面时,它不会加载。 但是,我刷新了当前页面,然后街景起作用了。 关于如何解决此问题的任何想法?
controllers.js
.controller('StreetviewCtrl', function($scope, $ionicLoading, $state, $stateParams){
console.log('Street view page loaded');
Parse.initialize("xyz", "xyz");
//Load the Goog map
$scope.initialise = function() {
console.log('initialize function');
var myLatlng = new google.maps.LatLng(40.758774, -73.98504);
var mapOptions = {
center: myLatlng,
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("street"), mapOptions);
var panoramaOptions = {
position: myLatlng,
addressControl: false,
pov: {
heading: 34,
pitch: 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('street'), panoramaOptions);
$scope.map=panorama;
};
google.maps.event.addDomListener(document.getElementById("street"), 'load', $scope.initialise());
//Go to the guessing page
$scope.makeGuess = function(item,event){
console.log('guess button tapped');
// $state.go('tab.account');
};
})
模板(streetview.html)
<ion-view title="Where are you?">
<ion-content class="padding">
<center>
<button on-touch="makeGuess()" class="button button-full button-positive">
Make a Guess <i class="ion-arrow-right-a"></i>
</button>
</center>
<div id="street" data-tap-disabled="false"></div>
</ion-content>
</ion-view>
要在每次进入视图时重新触发地图加载,请执行以下操作(在控制器中):
$scope.$on( "$ionicView.enter", function( scopes, states ) {
google.maps.event.trigger( map, 'resize' );
});
这对我有所帮助:在您离开“地图”屏幕后,清除缓存(不要伪造将$ ionicHistory注入到控制器中),因此当您回来时-地图将正确地重新呈现。
$ ionicHistory.clearCache();
从这里得到
在状态提供程序中添加此内容:cache:false(在定义地图时)。 这对我有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.