Google地图模式在两次打开后未显示 - Ionic [英] Google Maps in modal not showed after two times open - Ionic
问题描述
我在模态视图中创建了Google地图，一旦我打开该模式，地图就显示出来。然后，我点击导航按钮进入主页面。之后，我试图打开模式再次查看地图，但地图没有显示。
此处演示： http：// codepen。 HTML： $ p> Javascript：控制器 我在堆栈溢出中找到同样的问题模态中的Google地图只显示第一张地图，但仍然没有得到答案。我一直在看它，但我仍然无法解决这个问题。我希望有人能帮助我。 经过将近1周的时间，试着找到解决方案，最后我得到了答案。 所有代码在问题中都是相同的，但我只在控制器中添加此代码。检查出来 我也更改地图模块代码，我用$ cordovaGeolocation。下面是homeTabCtrl的完整代码 Javascript：homeTabCtrl I'm created a Google Map in a modal view, once I'm open that modal, the map was showed. Then, I clicked nav-back-button to go to main page. After that I tried to open the modal to view the map again, but the map didn't showed. Demo here: http://codepen.io/aishahismail/pen/vLZprV HTML: Javascript: Controller I found the same question in stack overflow Google maps in modal only displays first map but still didn't got the answer. I've been looking it in 1 day, but I'm still cannot solve this problem. I hope somebody can help me. After almost 1 week sitting try to find the solution, finally I've got the answer. All the code is same stated in the questions, but I'm only add this in my controller. Check it out I'm also change the maps module code, I'm used $cordovaGeolocation. Below is full code for homeTabCtrl Javascript: homeTabCtrl
这篇关于Google地图模式在两次打开后未显示 - Ionic的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
$ b < script id =modal.htmltype =text / ng-template>
< div class =modal>
< header class =bar bar-header bar-positive>
< h1 class =title>我是A Modal< / h1>
< div class =button button-clearng-click =modal.hide（）>< span class =icon ion-close>< / span>< / div> ;
< / header>
< content has-header =truepadding =true>
< p>这是一张地图< / p>
< div id =mapdata-tap-disabled =true>< / div>
< / content>
< / div>
< / script>
$ b $
.controller（'HomeTabCtrl'，函数（$ scope，$ ionicModal，$ ionicLoading，$ compile）{
console.log（'HomeTabCtrl'）;
$ ionicModal.fromTemplateUrl（'modal.html'，function（$ ionicModal）{
$ scope.modal = $ ionicModal;
}，{
scope：$ scope ，
animation：'slide-in-up'
}）;
$ b $ scope.showMap = 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编译ng-click
var contentString =< div>< a ng-click ='clickTest（）'>点击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（艾尔斯岩石）'
}）;
google.maps.event.addListener（marker，'click'，function（）{
infowindow.open（map，marker）;
}）;
$ scope.map = map;
$ b $ scope.openModal = function（）{
$ scope.modal.show（）;
$ scope.showMap（）;
}
}）;
//删除模态
$ scope。$ on（'$ destroy'，function（）{
$ scope.modal.remove（）;
}）;
//设置$ scope.map为空
$ scope。$ on（'modal.hidden'，function（）{
$ scope。$ on（'$ destroy '，function（）{
$ scope.map = null;
}）;
}）;
$ b < code。.controller（'HomeTabCtrl'，function（$ scope，$ ionicModal，$ cordovaGeolocation）{
$ ionicModal.fromTemplateUrl（'modal.html'，function（$ ionicModal）{
$ scope.modal = $ ionicModal;
}，{$ b $ scope：$ scope，
animation：'slide-in-up'
}）;
$ scope.showMap = function（）{
var options = {
timeout：10000，
enableHighAccuracy：true
};
$ cordovaGeolocation.getCurrentPosition（options）.then（function（position）{
var latLng = new google.maps.LatLng（lat，lng）;
var mapOptions = {
center：latLng，
zoom：15，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
$ scope.map = new google.maps.Map（document.g etElementById（map），mapOptions）;
google.maps.event.addListenerOnce（$ scope.map，'idle'，function（）{
var marker = new google.maps.Marker（{
map：$ scope.map，
animation：google.maps.Animation.DROP，
position：latLng
}）;
}）;
}，函数（错误）{
alert（Could not get location）;
}）;
};
$ scope.openModal = function（）{
$ scope.modal.show（）;
$ scope.showMap（）;
};
$ b $ //删除模态
$ scope。$ on（'$ destroy'，function（）{
$ scope.modal.remove（）;
}） ;
//设置$ scope.map为空
$ scope。$ on（'modal.hidden'，function（）{
$ scope。$ on（'$ destroy '，function（）{
$ scope.map = null;
}）;
}）;
}）;
<script id="modal.html" type="text/ng-template">
<div class="modal">
<header class="bar bar-header bar-positive">
<h1 class="title">I'm A Modal</h1>
<div class="button button-clear" ng-click="modal.hide()"><span class="icon ion-close"></span></div>
</header>
<content has-header="true" padding="true">
<p>This is a map</p>
<div id="map" data-tap-disabled="true"></div>
</content>
</div>
</script>
.controller('HomeTabCtrl', function($scope, $ionicModal, $ionicLoading, $compile) {
console.log('HomeTabCtrl');
$ionicModal.fromTemplateUrl('modal.html', function($ionicModal) {
$scope.modal = $ionicModal;
}, {
scope: $scope,
animation: 'slide-in-up'
});
$scope.showMap = 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;
}
$scope.openModal = function(){
$scope.modal.show();
$scope.showMap();
}
});
//Remove modal
$scope.$on('$destroy', function () {
$scope.modal.remove();
});
//Set $scope.map to null
$scope.$on('modal.hidden', function () {
$scope.$on('$destroy', function () {
$scope.map = null;
});
});
.controller('HomeTabCtrl', function($scope, $ionicModal, $cordovaGeolocation) {
$ionicModal.fromTemplateUrl('modal.html', function($ionicModal) {
$scope.modal = $ionicModal;
}, {
scope: $scope,
animation: 'slide-in-up'
});
$scope.showMap = function (){
var options = {
timeout: 10000,
enableHighAccuracy: true
};
$cordovaGeolocation.getCurrentPosition(options).then(function (position) {
var latLng = new google.maps.LatLng(lat, lng);
var mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
google.maps.event.addListenerOnce($scope.map, 'idle', function () {
var marker = new google.maps.Marker({
map: $scope.map,
animation: google.maps.Animation.DROP,
position: latLng
});
});
}, function (error) {
alert("Could not get location");
});
};
$scope.openModal = function(){
$scope.modal.show();
$scope.showMap();
};
//Remove modal
$scope.$on('$destroy', function () {
$scope.modal.remove();
});
//Set $scope.map to null
$scope.$on('modal.hidden', function () {
$scope.$on('$destroy', function () {
$scope.map = null;
});
});
});
