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標籤

回答

相關問題