jQuery 1.9.1，CSS和Google Maps:& quot;显示:none& quot;问题 [英] Jquery 1.9.1, CSS & Google Maps: "Display: none" issue

问题描述

我正在努力在自己的网站上使用Google地图.问题在于地图显示如下:

我知道这是一个已知的问题，它在显示div后重新调整对象的大小.(从 display:none; 更改为 display:block; 即是

)

我正在使用JQueryUI选项卡，并在封装选项卡的div上使用 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 Maps:& quot;显示:none& quot;问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！