javascript - 在 Ionic 应用程序中，Google map 仅在刷新页面时加载，但在来自其他页面时则不会加载，

Question

我正在尝试在 Ionic 应用程序中显示 Google map 街景，但无法正常工作。当我从另一个页面转到此页面时，它无法加载。但我刷新当前页面，然后街景就可以了。知道如何解决这个问题吗？

Controller .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>

Answer 1

要在每次进入 View 时重新触发 map 加载，请执行以下操作(在 Controller 中):

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