使用Google Maps API在jQuery UI選項(xiàng)卡中呈現(xiàn)地圖時(shí)，存在許多似乎是眾所周知的問題。我已經(jīng)看到有關(guān)類似問題的SO問題（例如，這里和這里），但那里的解決方案似乎僅適用于Maps API的v2。我檢查過的其他參考資料在這里和這里，以及我可以通過Googling挖掘的幾乎所有內(nèi)容。我一直在嘗試將地圖（使用API的v3）填充到具有混合結(jié)果的jQuery標(biāo)簽中。我正在使用所有內(nèi)容的最新版本（當(dāng)前為jQuery 1.3.2，jQuery UI 1.7.2，不了解Maps）。這是標(biāo)記和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'); } });});這是我發(fā)現(xiàn)的/不起作用的內(nèi)容（對于Maps API v3）：使用jQuery UI Tabs文檔（以及我鏈接的兩個(gè)問題的答案）中所述的左偏技術(shù)根本不起作用。實(shí)際上，功能最佳的代碼.ui-tabs .ui-tabs-hide { display: none; }改為使用CSS 。使地圖完全顯示在選項(xiàng)卡中的唯一方法是將CSS的width和height設(shè)置#map_canvas為絕對值。將寬度和高度更改為auto或100%導(dǎo)致地圖根本不顯示，即使已經(jīng)成功渲染（使用絕對寬度和高度）也是如此。我找不到它在Maps API之外的任何地方記錄，但map.checkResize()將無法再使用。相反，您必須通過調(diào)用觸發(fā)一個(gè)調(diào)整大小事件google.maps.event.trigger(map, 'resize')。如果未在綁定到tabsshow事件的函數(shù)內(nèi)部初始化地圖，則地圖本身會(huì)正確呈現(xiàn)，但控件不會(huì)正確顯示-大多數(shù)只是明顯丟失。所以，這是我的問題：還有其他人有完成相同壯舉的經(jīng)驗(yàn)嗎？如果是這樣，由于記錄的技巧對Maps API v3不起作用，您如何找出實(shí)際可行的方法？如何根據(jù)jQuery UI文檔使用Ajax加載選項(xiàng)卡內(nèi)容？我還沒有機(jī)會(huì)嘗試使用它，但是我猜想它將進(jìn)一步打破Maps。使它正常工作的機(jī)會(huì)是什么（或者不值得嘗試）？如何使地圖填充盡可能大的區(qū)域？我希望它能填充選項(xiàng)卡并適應(yīng)頁面大小調(diào)整，這與在maps.google.com上所做的方式大同小異。但是，就像我說的那樣，我似乎只限于將絕對寬度和高度CSS應(yīng)用于地圖div。抱歉，如果您花了很長時(shí)間，但這可能是Maps API v3 + jQuery標(biāo)簽的唯一文檔。干杯!
添加回答
舉報(bào)
0/150
提交
取消