Jquery 1.9.1，CSS& Google地图：“显示：无”问题 [英] Jquery 1.9.1, CSS & Google Maps: "Display: none" issue

问题描述

我努力在我的网站上获得Google地图。问题在于地图显示如下：

我了解的是在显示div之后重新调整对象大小的一个已知问题。 （从 display：none; 改为 display：block; 即是）

我在封装选项卡的div上使用JQueryUI选项卡和 display：none;

我尝试删除选项卡并在开始时将所有选项显示为块，然后在 window.load 上进行更改 - 但是看起来很糟糕在您加载后自行移动。

这 JSFiddle 演示了我希望如何（简化），尽管它有缺陷，因为我无法使其正常工作（它根本没有显示地图）。

是否有另一种方法来实现它 - 或者我必须为我的地图功能找到不同类型的布局？

display：block 处初始化地图，然后隐藏它。如果这是在$（function（）{...}）结构中完成的，那么您在隐藏之前不应该看到地图。

您也可以尝试在显示画布后，首先隐藏画布，并在第一次需要时初始化贴图。

无论采用哪种方式，只要在地图可见时初始化地图。

I'm struggling to get a Google map working on my website. The problem is that the map shows like this:

Which I understand is a known issue with re-sizing the object after it's div has been shown. (Changed from display: none; to display: block; that is)

I'm using JQueryUI Tabs and a display: none; on the div that encapsulates the tabs.

I did try removing the tabs and displaying all as a block on start, and then do the changes on window.load - but it's rather ugly having the watch things move around by itself after you have loaded.

This JSFiddle demonstrates how I want it (simplified), although it's flawed as I cannot make it work properly (it's not showing the map at all).

Is there another way to do it - or do I have to find a different kind of layout for my map functionality?

解决方案

I have found the only reliable approach is to initialize the map with the canvas at display:block, then hide it. If this is done in a $(function() {...}) structure, then you shouldn't see the map before it's hidden.

You can also try hiding the canvas initially and initializing the map when it is first needed, after showing the canvas.

Either way, only initialize the map when its canvas is visible.

这篇关于Jquery 1.9.1，CSS& Google地图：“显示：无”问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！