Google maps 谷歌地图隐藏/显示问题

我正在使用IONIC框架（虽然我不确定这是否相关），并且有一个视图，用户可以在地图和列表模式之间切换。问题是，如果初始模式为列表，并且用户切换，则地图会被裁剪/弄乱。但如果最初的模式是地图本身，一切都很好。我有一个密码笔——用来说明我所经历的问题。它现在设置为映射模式，但您可以更改此行

$scope.viewMode = 'Map';

到

---

看看这个问题。你知道为什么会发生这种情况，或者如何解决它吗？

将changeViewMethod更改为

function changeViewMode (){
if (viewMode == 'Map'){
    document.getElementById('map-canvas').style.display = 'none';
    document.getElementById('list-canvas').style.display = 'block';
    viewMode = 'List';
  } else {
    document.getElementById('map-canvas').style.display = 'block';
    document.getElementById('list-canvas').style.display = 'none';
    viewMode = 'Map';
    google.maps.event.trigger(map, 'resize');
    map.panTo(new google.maps.LatLng(-34.397, 150.644));
  }
}

---

这在第二个（纯地图）代码笔中解决了这个问题。

更新：关于原始代码笔，我尝试了

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

方法，但它不起作用。我认为问题在于ng show。在调整大小之前，它如何不进行渲染。凭直觉，我使用$timeout服务将调整大小的时间延迟了（比如20毫秒）

$timeout(function(){
        google.maps.event.trigger(map, 'resize');            
    }, 100);

现在地图显示正确。不确定这是不是最好的答案，但目前为止只有一个有效

---

Ps：总体而言，ng show似乎存在性能问题，这是核心问题。我看到很多在进出视图时使用它来显示项目的闪烁。如果可能的话，我不得不求助于ng，因为它没有出现闪烁问题

下面是另一个代码笔，它去掉了所有的离子元素，并通过在初始化时隐藏/取消隐藏map div来演示这个问题。

$timeout(function(){
        google.maps.event.trigger(map, 'resize');            
    }, 100);