Угловые/Ионные карты Google при изменении состояния

Question

Итак, я совершенно не знаком с угловыми и ионными, поэтому простите меня, если есть простой ответ на этот вопрос.

В принципе, моя проблема заключается в том, что если я загружаю страницу с картами google, она отлично работает, только если это первая страница, загружаемая первым. Если я загружаю его в другое состояние, перейдите к нему с картами google, там он не пройдет «google.maps.event.addDomListener (window, 'load', function() {".

Я принимаю это может быть что-то делать с этим подсекать в окно нагрузки, но я просто больше не знаю. кто-нибудь сталкивался с этим?

Вот мой текущий код.

angular.module('app', ['ionic']) 


.controller('MapCtrl', function($scope, $ionicLoading, $compile) { 

    google.maps.event.addDomListener(window, 'load', function() { 

    var myLatlng = new google.maps.LatLng(37.3000, -120.4833); 

    var mapOptions = { 
     center: myLatlng, 
     zoom: 15, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

    navigator.geolocation.getCurrentPosition(function(pos) { 


     var site = new google.maps.LatLng(55.9666469,-3.1708493); 
     /* $('#map').appendTo('.map-container'); 
     google.maps.event.trigger(map,'resize');*/ 
     var directionsService = new google.maps.DirectionsService; 
     var directionsDisplay = new google.maps.DirectionsRenderer; 

     directionsDisplay.setMap(map); 
     directionsService.route({ 
      provideRouteAlternatives:true, 
      destination: site, 
      origin: pos.coords.latitude+","+ pos.coords.longitude, 
      travelMode: google.maps.TravelMode.DRIVING, 
      unitSystem: google.maps.UnitSystem.METRIC 
      }, function(response, status) { 
      if (status === google.maps.DirectionsStatus.OK) { 
       directionsDisplay.setDirections(response); 


       var route = response.routes[0]; 
       // alert(route.legs[1].duration.text); 
       var summaryPanel = document.getElementById('directions_panel'); 
       summaryPanel.innerHTML = ''; 
       // For each route, display summary information. 
       for (var i = 0; i < route.legs.length; i++) { 
        var routeSegment = i + 1; 
        summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>'; 
        summaryPanel.innerHTML += route.legs[i].start_address + ' to <br>'; 
        summaryPanel.innerHTML += route.legs[i].end_address + '<br>'; 
        summaryPanel.innerHTML += route.legs[i].duration.text + '<br>'; 
        summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>'; 
       } 
      } else { 
       window.alert('Directions request failed due to ' + status); 
      } 
      }); 

     map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)); 
     var myLocation = new google.maps.Marker({ 
      position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude), 
      map: map, 
      title: "My Location" 
     }); 

     var infowindow = new google.maps.InfoWindow({ 
      content:"My Location" 
     }); 

     infowindow.open(map,myLocation); 

    }); 

    $scope.map = map; 
}); 

}) 


.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
    // for form inputs) 
    if(window.cordova && window.cordova.plugins.Keyboard) { 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
    } 
    if(window.StatusBar) { 
     // org.apache.cordova.statusbar required 
     StatusBar.styleDefault(); 
    } 
    }); 
}) 

.config(function($stateProvider, $urlRouterProvider) { 


$stateProvider 
.state('page4', { 
    url: '/page4', 
    templateUrl: 'page4.html' 
}) 
.state('page5', { 
    url: '/login', 
    templateUrl: 'page5.html' 
}) 

.state('page6', { 
    url: '/page6', 
    templateUrl: 'page6.html' 
}) 

.state('page7', { 
    url: '/page7', 
    templateUrl: 'page7.html' 
}) 

.state('page8', { 
    url: '/page8', 
    templateUrl: 'page8.html', 
    controller: 'MapCtrl' 

}) 

.state('page9', { 
    url: '/page9', 
    templateUrl: 'page9.html' 
}) 

.state('page11', { 
    url: '/page11', 
    templateUrl: 'page11.html' 
}) 

.state('page10', { 
    url: '/page10', 
    templateUrl: 'page10.html' 
}) 
; 

// if none of the above states are matched, use this as the fallback 

$urlRouterProvider.otherwise('/login'); 


}); 

Answer 1

Попробуйте либо заменить google.maps.event.addDomListener(window, 'load', function() {...}) с ionic.Platform.ready(function() {...})

Или установка ng-init=init() в вашем HTML-коде и в контроллере вместо google.maps.event.addDomListener(window, 'load', function() {...}) есть $scope.init = function() {...}