Google Maps API v3和jQuery-UI标签

我正在使用Google Maps API的新版本v3。基本上我遇到的问题是我在jQuery UI选项卡中有一个Google Map。地图不在第一个选项卡中，因此您必须单击选项卡才能查看地图，但它并不总是正确显示。即有时地图图像放置不正确。Google Maps API v3和jQuery-UI标签

我有这个问题时，我用的是API第2，但我设法通过初始化我的地图这样来解决问题：

map = new GMap2(document.getElementById("map"),{size:new GSize(500,340)});

不幸的是，它不是在V3工作。我看了一眼在这个线程的建议：Problems with Google Maps API v3 + jQuery UI Tabs

真的没什么工作对我来说，但我用我初始化选项卡上的加载地图功能的解决方法之一：

$(function() 
{ 
    $("#tabs-container").tabs({show: function(event, ui) 
    { 
     if(ui.panel.id == "viewmap") 
     { 
      mapiInitialize(); 
     } 
    }}); 
});

这是所有不错，但我更喜欢地图在用户点击标签时显示“有”。有时地图加载需要花几秒钟，所有用户在这段时间看到的都是纯灰色的背景 - 某种加载指示器可能会有所帮助。

那么有没有人有任何建议？我的标记和CSS如下：

<div id="tabs-container"> 
<ul> 
    <li><a href="#details"><span>Details</span></a></li> 

    <li><a href="#viewmap"><span>Location Map</span></a></li> 

    <li><a href="#reviews"><span>Reviews (<?php echo $numrows; ?>)</span></a></li> 
</ul> 

<div id="details"><?php echo $details; ?></div> 

<div id="viewmap" style="padding: 10px; border: 1px solid #A9A9A9;"> 
    <div id="map" style="height: 340px;"></div> 
</div> 

<div id="reviews"><?php echo $reviews; ?></div> 

</div><!-- end tab-container -->

来源

2010-10-10 GSTAR

一旦你切换到具有地图调用google.maps.events.trigger(map, 'resize');那么就应该让它正确显示的选项卡。

来源

2010-10-12 00:06:12 skarE

凡应的代码去？在我的jQuery UI标签功能或谷歌地图JS文件？我试着放入jQuery UI Tabs函数，但它告诉我google.maps.events为null。我在jQuery UI Tabs功能之前包含了Google Maps JS文件。 – GSTAR 2010-10-12 10:05:34

当选项卡显示并且地图现在可见时，它应该放在选项卡代码中的某处。 – skarE 2010-10-12 22:27:49

这仍然不起作用。任何人都可以提供建议？ – GSTAR 2010-10-25 14:27:05

试试这个，当你初始化你的jQuery UI选项卡：

$("#tabs-container").tabs({      
    show: function(event, ui) { 
     google.maps.event.trigger(map, 'resize'); 
    }      
});

注意：您必须初始化地图你初始化标签之前。

来源

2011-02-16 19:36:57 Hassaan

只使用

map.setZoom(map.getZoom());

来源

2012-03-28 06:19:13

Google Maps API v3和jQuery-UI标签

回答

相关问题