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

Angular / Ionic google maps on state change

本文关键字:状态 变化 谷歌地图 角度      更新时间:2023-09-26

好的,所以我对角度和离子完全陌生,所以如果有一个简单的答案,请原谅我。

基本上我的问题是,如果我加载带有谷歌地图的页面,则只有当这是首先加载的页面时,它才能正常工作。如果我将其加载到不同的状态,然后移动到带有谷歌地图的状态,它不会超过"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');

});

尝试将google.maps.event.addDomListener(window, 'load', function() {...})替换为ionic.Platform.ready(function() {...})

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