Question

我试图通过在display:none;和display:inherit;之间切换来隐藏/显示Google地图。当我将display:inherit应用于Google地图时，部分地图会被裁剪，我不确定原因。如何在使用display:none;时解决此问题？

Link to example

//HTML
<button id="toggleMap">Toggle Google Map</button>
<button id="toggleImage">Toggle Image</button>

<div id="image">
  <img src="http://jdm-digital.com/wp-content/uploads/2012/04/google-jquery-opt-465x346.jpg">
</div>

<div id="map" style="width:500px; height:500px; display:none;">
  <div id="map_canvas" style="height:100%;"></div>
</div>


//JavaScript
$('#toggleImage').click(function() {
  $('#image').css('display', 'inherit');
  $('#map').css('display', 'none');
});

$('#toggleMap').click(function() {
  $('#image').css('display', 'none');
  $('#map').css('display', 'inherit');
});

Answer 1

如果您在隐藏地图时创建地图，则API不知道它应该有多大，因为浏览器报告它的大小为零。 API仅为零尺寸地图加载足够的图块，并将中心定位在（0,0） - 左上角。

当您取消隐藏地图时，请通过触发调整大小事件告诉API获取新大小：

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

Documentation - 向下滚动到“事件”。

Answer 2

如果我理解正确，您可以提供display:block而不是display:inherit

Answer 3

我的解决方案是在点击$('#map').append(mapHTML);时使用#toggleMap。这种方式允许在#map变为可见时创建地图。

我觉得这种做法有点像黑客攻击;如果有人有替代解决方案，我肯定想知道它。

//HTML
<div id="map" style="width:500px; height:500px; display:none;"></div>


//JavaScript
$('#toggleMap').click(function() {
  $('#image').css('display', 'none');
  $('#map').css('display', 'inherit');

  var mapHTML = "<div id=\"map_canvas\" style=\"height:100%;\"></div>";
  $('#map').append(mapHTML);
  googleMap();  //Google Map's initialize() that would create the map
});

使用Display时谷歌地图被裁剪：继承;

3 个答案: