关于状态变化的角度/离子谷歌地图

Question

好的，所以我对角和离子都是全新的，所以原谅我，如果有一个简单的答案。

基本上我的问题是，如果我加载谷歌地图上的页面，它工作正常，只有当这是首先加载的页面。如果我加载它在不同的状态，然后移动到谷歌地图那里它不会得到过去“google.maps.event.addDomListener（窗口，'加载'，功能（）{”。

我假设这也许有事情做与此挂钩到窗口负载，但我只是不知道了。有没有人遇到过这个？

这里是我当前的代码。

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

尝试要么ionic.Platform.ready(function() {...})

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

或设置ng-init=init()在你的HTML中而在控制器上而不是google.maps.event.addDomListener(window, 'load', function() {...})有$scope.init = function() {...}