作者Peruheru (还在想)
看板Ajax
标题[问题] 同时使用jQuery UI与Google Map API
时间Tue Oct 20 18:57:46 2009
才刚问就在英文讨论区看到解答了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 <
[email protected]> 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)