Javascript 贴图未第二次渲染，或第二次在其他页面上渲染
我想显示两种不同功能的地图。 当点击第一个地图页面时，它的工作正常，但之后导航到其他页面地图时，它的不工作显示空白页面。有人能帮忙吗 第一控制器代码Javascript 贴图未第二次渲染，或第二次在其他页面上渲染,javascript,google-maps,ionic-framework,Javascript,Google Maps,Ionic Framework,我想显示两种不同功能的地图。 当点击第一个地图页面时，它的工作正常，但之后导航到其他页面地图时，它的不工作显示空白页面。有人能帮忙吗 第一控制器代码 .controller('ShowMapCtrl', function($scope, Chats, global, $timeout,loader,geolocation,apiservice,local,$cordovaGeolocation,$stateParams) { $scope.init = function(){
.controller('ShowMapCtrl', function($scope, Chats, global, $timeout,loader,geolocation,apiservice,local,$cordovaGeolocation,$stateParams) {
$scope.init = function(){
var lat = $stateParams.lat;
var long = $stateParams.long;
var name = $stateParams.name;
var time = $stateParams.time;
var address = $stateParams.address;
//alert(name+"Map Controller"+time);
//var options = {timeout: 10000, enableHighAccuracy: true};
//$cordovaGeolocation.getCurrentPosition(options).then(function(position){
var latLng = new google.maps.LatLng(lat, long);
var address = null;
var map=null;
var marker=null;
var mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
if(address == 'Not Found Data' || address == null){
var geocoder = new google.maps.Geocoder;
var latlng = {lat: lat, lng: long};
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === 'OK') {
if (results[1]) {
address=results[1].formatted_address;
//infowindow.setContent();
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}
if(map!=null){
//alert("Map not clear")
map.setOptions(mapOptions);
}
map = new google.maps.Map(document.getElementById("map"), mapOptions);
//Wait until the map is loaded
google.maps.event.addListenerOnce(map, 'idle', function(){
if(marker){
marker.setMap(null);
}
marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: latLng
});
var contentstr="<div><strong>Name:</strong>"+name+"<br/><strong>Time:</strong>"+time+"<br/><strong>Location:</strong>"+address+"</div>";
var infoWindow = new google.maps.InfoWindow({
content: contentstr
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.open(map, marker);
});
});
}
$scope.$on('$ionicView.beforeEnter', function() {
$scope.init();
});
/*}, function(error){
console.log("Could not get location");
});*/
/*var map;
document.addEventListener("deviceready", function() {
var div = document.getElementById("map_canvas");
// Initialize the map view
map = plugin.google.maps.Map.getMap(div);
// Wait until the map is ready status.
map.addEventListener(plugin.google.maps.event.MAP_READY, onMapReady);
}, false);
function onMapReady() {
var button = document.getElementById("button");
button.addEventListener("click", onBtnClicked, false);
}
function onBtnClicked() {
map.showDialog();
}
*/
})
.controller（'ShowMapCtrl'，函数（$scope、Chats、global、$timeout、loader、geolocation、apiservice、local、$cordovaGeolocation、$stateparms）{
$scope.init=函数（）{
var lat=$stateParams.lat；
var long=$stateParams.long；
var name=$stateParams.name；
var time=$stateParams.time；
var address=$stateParams.address；
//警报（名称+地图控制器+时间）；
//var options={timeout:10000，enableHighAccurance:true}；
//$cordovaGeolocation.getCurrentPosition（选项）。然后（函数（位置）{
var latLng=新的google.maps.latLng（lat，long）；
var地址=null；
var-map=null；
var-marker=null；
变量映射选项={
中心：拉特林，
缩放：15，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
如果（地址=='未找到数据'| |地址==空）{
var geocoder=new google.maps.geocoder；
var-latlng={lat:lat，lng:long}；
geocoder.geocode（{'location'：latlng}，函数（结果，状态）{
如果（状态=='OK'）{
如果（结果[1]）{
地址=结果[1]。格式化的\u地址；
//setContent（）；
}否则{
window.alert（“未找到结果”）；
}
}否则{
window.alert（'地理编码器由于：'+状态而失败）；
}
});
}
if（map！=null）{
//警报（“地图不清晰”）
设置选项（mapOptions）；
}
map=new google.maps.map（document.getElementById（“map”）、mapOptions）；
//等待地图加载
google.maps.event.addListenerOnce（map'idle'，function（）{
如果（标记）{
marker.setMap（空）；
}
marker=新的google.maps.marker({
地图：地图，
动画：google.maps.animation.DROP，
职位：latLng
});
var contentstr=“名称：”+Name+”
时间：“+Time+”
位置：“+address+”；
var infoWindow=new google.maps.infoWindow({
内容：contentstr
});
google.maps.event.addListener（标记，'click'，函数（）{
信息窗口。打开（地图、标记）；
});
});
}
$scope.$on（“$ionicView.beforeEnter”函数（）{
$scope.init（）；
});
/*}，函数（错误）{
log（“无法获取位置”）；
});*/
/*var映射；
document.addEventListener（“deviceready”，函数（）{
var div=document.getElementById（“映射画布”）；
//初始化地图视图
map=plugin.google.maps.map.getMap（div）；
//等待地图处于就绪状态。
addEventListener（plugin.google.maps.event.map_READY，onMapReady）；
}，假）；
函数onMapReady（）{
var button=document.getElementById（“按钮”）；
按钮。addEventListener（“单击”，点击，错误）；
}
函数onBtnClicked（）{
showDialog（）；
}
*/
})
<ion-view view-title="Map Loaction">
<ion-content class="has-header">
<div id="map" data-tap-disabled="true"></div>
</ion-content>
</ion-view>
.controller('AllEmpLoc', function($scope, Chats, global, $timeout,loader,geolocation,apiservice,local,$cordovaGeolocation,$stateParams) {
//alert("All Location Emp");
$scope.init = function(){
loader.show();
var url = global.API_URL + "getAlluserlocation/" + local.getData('uid');
apiservice.callJson(url).then(function(response) {
//alert(JSON.stringify(response));
console.log("CurrentLocation" + JSON.stringify(response.data));
console.log("Name"+response.data[0].name);
$scope.userlist = response.data;
//alert("length"+response.data.length);
//alert("scope length"+$scope.userlist.length);
var lat = response.data[0].latitude;
var lon = response.data[0].longitude;
var address = null;
var locations = [];
var map=null;
var marker=null;
var cnt=0;
for(var i=0;i<response.data.length;i++){
locations[i]=[response.data[i].name,response.data[i].latitude,response.data[i].longitude,response.data[i].address,response.data[i].time];
}
console.log("Locations->"+JSON.stringify(locations));
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(lat, lon),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
if(map!=null){
//map.clear();
map.setOptions(mapOptions);
}
map = new google.maps.Map(document.getElementById('map'),mapOptions );
var infowindow = new google.maps.InfoWindow();
for(var i=0;i<locations.length;i++){
//alert(locations[i][0]);
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var contentStr = "<div> <strong>Name:</strong>"+locations[i][0]+"<br/>"+"<strong>Time:</strong>"+locations[i][4]+"<br/><strong>Location:</strong>"+locations[i][3]+"</div>";
infowindow.setContent(contentStr);
infowindow.open(map, marker);
}
})(marker, i));
}
//console.log(JSON.stringify(locations));
loader.hide();
}, function(err) {
console.error("eroor " + JSON.stringify(err));
//alert("error occur->" + err.data);
});
}
$scope.$on('$ionicView.beforeEnter', function() {
$scope.init();
});
})
<ion-view view-title="User Location">
<ion-content class="has-header">
<div id="map" data-tap-disabled="true"></div>
</ion-content>
</ion-view>
<ion-view view-title="Map Loaction">
<ion-content class="has-header">
<div id="map" data-tap-disabled="true"></div>
</ion-content>
</ion-view>
.controller('AllEmpLoc', function($scope, Chats, global, $timeout,loader,geolocation,apiservice,local,$cordovaGeolocation,$stateParams) {
//alert("All Location Emp");
$scope.init = function(){
loader.show();
var url = global.API_URL + "getAlluserlocation/" + local.getData('uid');
apiservice.callJson(url).then(function(response) {
//alert(JSON.stringify(response));
console.log("CurrentLocation" + JSON.stringify(response.data));
console.log("Name"+response.data[0].name);
$scope.userlist = response.data;
//alert("length"+response.data.length);
//alert("scope length"+$scope.userlist.length);
var lat = response.data[0].latitude;
var lon = response.data[0].longitude;
var address = null;
var locations = [];
var map=null;
var marker=null;
var cnt=0;
for(var i=0;i<response.data.length;i++){
locations[i]=[response.data[i].name,response.data[i].latitude,response.data[i].longitude,response.data[i].address,response.data[i].time];
}
console.log("Locations->"+JSON.stringify(locations));
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(lat, lon),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
if(map!=null){
//map.clear();
map.setOptions(mapOptions);
}
map = new google.maps.Map(document.getElementById('map'),mapOptions );
var infowindow = new google.maps.InfoWindow();
for(var i=0;i<locations.length;i++){
//alert(locations[i][0]);
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var contentStr = "<div> <strong>Name:</strong>"+locations[i][0]+"<br/>"+"<strong>Time:</strong>"+locations[i][4]+"<br/><strong>Location:</strong>"+locations[i][3]+"</div>";
infowindow.setContent(contentStr);
infowindow.open(map, marker);
}
})(marker, i));
}
//console.log(JSON.stringify(locations));
loader.hide();
}, function(err) {
console.error("eroor " + JSON.stringify(err));
//alert("error occur->" + err.data);
});
}
$scope.$on('$ionicView.beforeEnter', function() {
$scope.init();
});
})
<ion-view view-title="User Location">
<ion-content class="has-header">
<div id="map" data-tap-disabled="true"></div>
</ion-content>
</ion-view>
.controller（'AllEmpLoc'，函数（$scope、Chats、global、$timeout、loader、geolocation、apiservice、local、$cordovaGeolocation、$stateparms）{
//警报（“所有位置Emp”）；
$scope.init=函数（）{
loader.show（）；
var url=global.API_url+“getAlluserlocation/”+local.getData（'uid'）；
callJson（url）.then（函数（响应）{
//警报（JSON.stringify（响应））；
log（“CurrentLocation”+JSON.stringify（response.data））；
console.log（“Name”+response.data[0].Name）；
$scope.userlist=response.data；
//警报（“长度”+响应.数据.长度）；
//警报（“范围长度”+$scope.userlist.length）；
var lat=响应。数据[0]。纬度；
var lon=response.data[0]。经度；
var地址=null；
var位置=[]；
var-map=null；
var-marker=null；
var-cnt=0；
对于（var i=0；i大多数情况下是由于离子缓存，请添加下面的函数以触发贴图再次渲染
$scope.$on( "$ionicView.enter", function( scopes, states ) {
// This view runs every time you move between tabs
google.maps.event.trigger( map, 'resize' );
});
大多数情况下是由于离子缓存，请添加下面的函数以触发贴图再次渲染
$scope.$on( "$ionicView.enter", function( scopes, states ) {
// This view runs every time you move between tabs
google.maps.event.trigger( map, 'resize' );
});