javascript - map 未第二次渲染或第二次在其他页面上渲染 ionic 1

Question

我想显示两种不同功能的 map 。当单击第一个 map 页面时，它工作正常，但是当导航到其他页面 map 时，它无法工作，显示空白页面。任何人都可以帮忙......!!!

第一个 Controller 代码

.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 的页面

<ion-view view-title="Map Loaction">
   <ion-content class="has-header">
     <div id="map" data-tap-disabled="true"></div>
    </ion-content>

</ion-view>

第二个 Controller

.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();
            });




    }) 

第二个 Controller 的页面

<ion-view view-title="User Location">
   <ion-content class="has-header">
     <div id="map" data-tap-disabled="true"></div>
    </ion-content>
</ion-view>

如果这两个 map 之一成功加载，则第二个未加载

Answer 1

大多数时候是 ionic 缓存导致的，添加下面的函数来触发 map 再次渲染。

$scope.$on( "$ionicView.enter", function( scopes, states ) {
               // This view runs every time you move between tabs
               google.maps.event.trigger( map, 'resize' );
          });