在Ionic应用程序中，只有在刷新页面时才会加载Google Maps，而从其他页面返回时则不会加载，

Question

I am trying to show a Google Maps street view in an Ionic app but am having troublegetting it work. When I go from another page to this page, it doesn't load. But I refresh this current page, then the street view works. Any idea on how to fix this?

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');
    };


})

template (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>

Answer 1

To retrigger map load every time your view is entered, do something like the following (in the controller):

        $scope.$on( "$ionicView.enter", function( scopes, states ) {
           google.maps.event.trigger( map, 'resize' );
        });

Answer 2

this helped me: After you navigate away from "map" screen, clear the cache (don't forge to inject $ionicHistory into your controller), so when you come back - map will re-render properly.

$ionicHistory.clearCache();

got it from here

Answer 3

Add this : cache: false to your state provider (when you defined your map). This worked for me.