[問題] 同時使用jQuery UI與Google Map API (렠…
才剛問就在英文討論區看到解答了XD
順便提供一下我看到的答案
或許能對後世有幫助....也不一定....?
討論區內容：
=======================================================================
This is because you probably try to initialize a map in a hidden tab.
You cannot properly initialize a map in hidden elements.
Thus you need to use the off-left technique instead to hide inactive
tab panels. In the style sheet search for the selector ".ui-tabs-hide"
and change the declaration to:
.ui-tabs-hide {
position: absolute;
left: -1000px;
}
--Klaus
On Mar 18, 4:05 am, CodeOfficer <codeoffi...@gmail.com> wrote:
=======================================================================
反正大意就是
google map不同意在隱藏的區塊內進行地圖的init初始化
所以才會分別在不同的瀏覽器上出問題
應對方式就是更改jQuery UI Tabs的css設定
原本其設定不顯示的頁面是設成 display:none;
將它改成顯示，但定位方式是 positon: absolute;
而位置是網頁左邊界往前1000px的範圍 left:-1000px;
依照放置在tabs內的元素大小，可能還需要改left後的負數，免得露餡XD
這樣測試過後，就可以同時在IE跟FireFox上，在Tabs內顯示Google Map了
※===========================================================
因為需要使用Google Map的地圖資料、經緯度和住址等
所以引用了google map的API來用
在自己做的網頁上放上一塊區域提供給google map用
但是因為還需要做一些ajax效果
也需要做一些java script的選單等等
所以選用了jQuery這個framework
然後在外觀上使用了jQuery UI
像是tabs、blockUI
問題在此時發生
我在tabs內各別放上不同內容
而google map放在第二個tab內
也就是網頁的初始畫面上並不會出現google map
而要點選第二個tab之後，不換頁的顯示出google map
起初我是將google map另外做一個網頁
然後使用iframe放在tab2內
這麼做的話在IE可以顯示出來，可以運作
但在FireFox內只有顯示出放大縮小的圖示跟google的版權圖示
地圖本身、marker這些都無法顯示
而後來我將整個map以及在map上要做的事情這些剪下
直接在主網頁上引用gmap，而不再使用iframe
其結果是FireFox可以正常顯示了
但IE卻死的像之前的FireFox一樣
只有顯示那兩個圖示，而完全沒有正常顯示 以及作用地圖的功能
只差在FireFox死在gmap上時，圖示全都擠到地圖區域的上方邊界
換IE死在gmape上時，圖示則在它們應該在的位置
開始寫網頁沒有多久的經驗
不知道如何解決跨瀏覽器的問題
至少希望在這兩個瀏覽器上能正常運作
(我自己用火狐，而要給別人用時大概得用IE)
是不是應該要注意什麼，才能同時兩者都能在tab內顯示google map呢?
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 192.192.154.54
※ 編輯: Peruheru 來自: 192.192.154.54 (10/20 19:19)