使用Google Maps API在jQuery UI選項卡中呈現地圖時，存在許多似乎是眾所周知的問題。我已經看到有關類似問題的SO問題（例如，這里和這里），但那里的解決方案似乎僅適用于Maps API的v2。我檢查過的其他參考資料在這里和這里，以及我可以通過Googling挖掘的幾乎所有內容。我一直在嘗試將地圖（使用API的v3）填充到具有混合結果的jQuery標簽中。我正在使用所有內容的最新版本（當前為jQuery 1.3.2，jQuery UI 1.7.2，不了解Maps）。這是標記和javascript：<body> <div id="dashtabs"> <span class="logout"> <a href="go away">Log out</a> </span> <!-- tabs --> <ul class="dashtabNavigation"> <li><a href="#first_tab" >First</a></li> <li><a href="#second_tab" >Second</a></li> <li><a href="#map_tab" >Map</a></li> </ul> <!-- tab containers --> <div id="first_tab">This is my first tab</div> <div id="second_tab">This is my second tab</div> <div id="map_tab"> <div id="map_canvas"></div> </div> </div></body>和$(document).ready(function() { var map = null; $('#dashtabs').tabs(); $('#dashtabs').bind('tabsshow', function(event, ui) { if (ui.panel.id == 'map_tab' && !map) { map = initializeMap(); google.maps.event.trigger(map, 'resize'); } });});這是我發現的/不起作用的內容（對于Maps API v3）：使用jQuery UI Tabs文檔（以及我鏈接的兩個問題的答案）中所述的左偏技術根本不起作用。實際上，功能最佳的代碼.ui-tabs .ui-tabs-hide { display: none; }改為使用CSS 。使地圖完全顯示在選項卡中的唯一方法是將CSS的width和height設置#map_canvas為絕對值。將寬度和高度更改為auto或100%導致地圖根本不顯示，即使已經成功渲染（使用絕對寬度和高度）也是如此。我找不到它在Maps API之外的任何地方記錄，但map.checkResize()將無法再使用。相反，您必須通過調用觸發一個調整大小事件google.maps.event.trigger(map, 'resize')。如果未在綁定到tabsshow事件的函數內部初始化地圖，則地圖本身會正確呈現，但控件不會正確顯示-大多數只是明顯丟失。所以，這是我的問題：還有其他人有完成相同壯舉的經驗嗎？如果是這樣，由于記錄的技巧對Maps API v3不起作用，您如何找出實際可行的方法？如何根據jQuery UI文檔使用Ajax加載選項卡內容？我還沒有機會嘗試使用它，但是我猜想它將進一步打破Maps。使它正常工作的機會是什么（或者不值得嘗試）？如何使地圖填充盡可能大的區域？我希望它能填充選項卡并適應頁面大小調整，這與在maps.google.com上所做的方式大同小異。但是，就像我說的那樣，我似乎只限于將絕對寬度和高度CSS應用于地圖div。抱歉，如果您花了很長時間，但這可能是Maps API v3 + jQuery標簽的唯一文檔。干杯!
3 回答
- 3 回答
- 0 關注
- 665 瀏覽
添加回答
舉報
0/150
提交
取消