Question

我有一个5个标签的应用程序，其中一个包含一个地图。地图只在直接在网址栏中浏览时加载。否则，似乎控制器未加载，因为我由某些控制台日志确定。由于应用程序将在移动设备上运行，因此我将永远不会首先加载地图页面，因此我需要修复此问题。我认为在点击标签时会调用控制器，但事实并非如此。

控制器

.controller('MapCtrl', function($scope, $ionicLoading, $compile) {
  //console.log("Map controller");
  function initialize() {
    var myLatlng = new google.maps.LatLng(43.07493,-89.381388);

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

    //console.log('placing map');
    var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);

    //Marker + infowindow + angularjs compiled ng-click
    var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
    var compiled = $compile(contentString)($scope);

    var infowindow = new google.maps.InfoWindow({
      content: compiled[0]
    });

    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)'
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });

    $scope.map = map;
  }
  google.maps.event.addDomListener(window, 'load', initialize);

  $scope.centerOnMe = function() {
    if(!$scope.map) {
      return;
    }

    $scope.loading = $ionicLoading.show({
      content: 'Getting current location...',
      showBackdrop: false
    });

    navigator.geolocation.getCurrentPosition(function(pos) {
      $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
      $scope.loading.hide();
    }, function(error) {
      alert('Unable to get location: ' + error.message);
    });
  };

  $scope.clickTest = function() {
    alert('Example of infowindow with ng-click')
  };

})

查看

<ion-view view-title="Directions">
    <ion-content>
        <div id="map" class="card" data-tap-disabled="true">
        </div>
    </ion-content>
</ion-view>

标签

<ion-tab title="Directions" icon-off="ion-ios-location-outline" icon-on="ion-ios-location" href="#/tab/directions">
   <ion-nav-view name="tab-directions"></ion-nav-view>
</ion-tab>

路由器

.state('tab.directions', {
    url: '/directions',
    views: {
        'tab-directions': {
            templateUrl: 'templates/tab-directions.html',
            controller: 'MapCtrl'
         }
    }
})

请提出问题，我可以提供更多信息。

Answer 1

我有同样的问题。我在输入视图时执行该功能。我添加了google.maps.event.trigger（地图，＆＃39;调整大小＆＃39;）;在$ scope.map = map之后;因为地图仅在刷新视图后加载。

这是我的控制者：

.controller('MapsController', function($scope, $ionicLoading){

$scope.$on( "$ionicView.enter", function( scopes, states ) {
  var myLatlng = new google.maps.LatLng(37.3000, -120.4833);

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

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

  navigator.geolocation.getCurrentPosition(function (pos) {
    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"
    });
  });

  $scope.map = map;
  google.maps.event.trigger( map, 'resize' );
 });
});

离子地图控制器没有加载

1 个答案: