Angular / Ionic google 映射状态变化

Question

好的，所以我是 angular 和 Ionic 的新手，如果有一个简单的答案，请原谅我。

基本上我的问题是，如果我加载一个带有 google 地图的页面，只有当该页面是第一个加载的页面时，它才能正常工作。如果我将它加载到不同的状态，然后移动到带有 google 地图的状态，它不会超过 "google.maps.event.addDomListener(window, 'load', function() {".

我假设这可能与挂接到 window 负载有关，但我不知道了。有没有人经历过这个？

这是我当前的代码。

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

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

Angular / Ionic google 映射状态变化

Angular / Ionic google maps on state change

javascript

maps

ionic

state