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

Question

我正在使用 IONIC 和 AngularJS，并包含 Google map 。我有这个 map 的模板和 Controller ，我将在两个选项卡上使用该 map 。

.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>

Controller :

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

第一个选项卡上的 URL: /tab1/map

第二个选项卡上的 URL: /tab2/map

现在，当我调用其中一个 URL 时，一切都很好，我可以看到我的 map 。但是当我更改选项卡时，我就看不到 map 了。 div 似乎是空的。页面重新加载后， map 可见。

有谁知道如何处理多个选项卡上的“同一”页面？提前致谢。

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>

在我的 Controller 逻辑中

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);
}

这对我有用，在选项卡之间切换时 map 始终可见。