Question

我正在与IONIC和AngularJS合作并且包含Google地图。我有一个模板和一个控制器用于这个地图，我将在两个标签上使用地图。

.state('tab.map1', {
  url: '/tab1/map',
  views: {
    'map1-tab': {
      templateUrl: 'templates/map.html',
      controller: 'MapController'
    }
  }
})
.state('tab.map2', {
  url: '/tab2/map',
  views: {
    'map2-tab': {
      templateUrl: 'templates/map.html',
      controller: 'MapController'
    }
  }
})

HTML：

<div id="map"></div>

控制器：

$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

第一个标签上的网址：的 / TAB1 /地图

第二个标签上的网址：的 / TAB2 /地图

现在，当我打电话给其中一个网址时，一切都很好，我可以看到我的地图。但是当我更改标签时，我再也看不到地图了。 div似乎是空的。页面重新加载后，地图可见。

有没有人知道如何处理＆＃34;相同＆＃34;多个标签上的页面？提前谢谢。

Answer 1

如果其他人有同样的问题，请点击此处：

问题是，我为两个标签使用了相同的HTML，div不应该具有相同的ID。

.state('tab.map1', {
  url: '/tab1/map',
  views: {
    'map1-tab': {
      templateUrl: 'templates/map1.html',
      controller: 'MapController'
    }
  }
})
.state('tab.map2', {
  url: '/tab2/map',
  views: {
    'map2-tab': {
      templateUrl: 'templates/map2.html',
      controller: 'MapController'
    }
  }
})

第一个标签的HTML：

<div id="map1"></div>

第二个标签的HTML：

<div id="map2"></div>

在我的控制器逻辑中

if ($location.path() == 'tab1\map'){
  $scope.map = new google.maps.Map(document.getElementById('map1'), mapOptions);
}else{
  $scope.map = new google.maps.Map(document.getElementById('map2'), mapOptions);
}

这对我有用，在标签之间切换时，地图始终可见。

Answer 2

上面的答案是一个开始，你需要两个地图实例。如果仍然无法正常工作，请尝试触发Google地图并调整尺寸＆＃39;返回地图页时：

google.maps.event.trigger(map, 'resize');

http://code.google.com/apis/maps/documentation/v3/reference.html#event

（我在离子2中有类似的问题，我通过使用导航数组推送和弹出每个页面而不是导航到它来解决它，但我相信Ionic 1使用实际的URL路径。）

具有相同Controller和相同模板的多个选项卡上的Angular Google Map

2 个答案: