谷歌地图在使用显示器时被裁剪：继承; [英] Google Map Gets Cropped When Using Display:Inherit;

问题描述

我试图通过在 display：none; 和 display：inherit; 之间切换来隐藏/ 。当我将 display：继承应用于Google地图时，地图的一部分会被裁剪掉，我不确定原因。我仍然使用 display：none; ？

链接示例

  // HTML 
< button id =toggleMap>切换Google地图< / button> 
< button id =toggleImage>切换图片< / button> 
 
< div id =image> 
< img src =http://jdm-digital.com/wp-content/uploads/2012/04/google-jquery-opt-465x346.jpg> 
< / div> 
 
< div id =mapstyle =width：500px; height：500px; display：none;> 
< div id =map_canvasstyle =height：100％;>< / div> 
< / div> 
 
 $ b // JavaScript 
 $（'＃toggleImage'）。click（function（）{
 $（'＃image'）。css（'display' ，'inherit'）; 
 $（'＃map'）。css（'display'，'none'）; 
}）; 
 $ b $（'＃toggleMap'）。click（function（）{
 $（'＃image'）。css（'display'，'none'）; 
 $ （'#map'）。css（'display'，'inherit'）; 
}）; 
  

解决方案

不知道应该有多大，因为浏览器报告它的大小为零。该API仅为零尺寸的地图加载足够的图块，并将中心定位在（0,0）—当您取消隐藏地图时，通过触发resize事件告诉API获取新大小：

  google.maps.event.trigger（map，'resize'）
  

文档—向下滚动到事件。

I am trying to hide/show Google Maps by switching between display:none; and display:inherit;. When I apply display:inherit to Google Maps, part of the map gets cropped and I am unsure why. How would I fix this while still using 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');
});

解决方案

If you create a map while it's hidden the API doesn't know how big it should be because the browser reports it has zero size. The API only loads enough tiles for a zero-size map, and positions the centre at (0,0) — the top-left corner.

When you unhide the map, tell the API to get the new size by triggering the resize event:

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

Documentation — scroll down to Events.

这篇关于谷歌地图在使用显示器时被裁剪：继承;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！