Question

我正在使用IONIC框架（虽然我不确定它是否相关）并且有一个用户可以在地图和列表模式之间切换的视图。问题是如果初始模式是列表，并且用户切换，则地图被裁剪/搞砸。但如果初始模式是地图本身，一切都很好。我有一个codepen - http://codepen.io/anon/pen/OPrvRG - 来说明我遇到的问题。它现在设置为地图模式，但您可以更改此行

$scope.viewMode = 'Map';

到

$scope.viewMode = 'List';

看到问题所在。任何想法为什么会发生这种情况或如何解决/解决它？

Answer 1

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

这解决了第二个（纯映射）Codepen中的问题。

Answer 2

更新：关于原始的codepen，我尝试了

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

在切换模式方法中的

方法，但它没有工作。我认为这个问题与ng-show有关。一些如何在调整大小之前不进行渲染。在预感中，我使用$ timeout服务甚至延迟调整大小（比如说20ms）。

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

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

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

谷歌地图隐藏/显示问题

2 个答案: