作者hera1016 ()
看板Ajax
標題[問題] jcarousel + google map 所產生的問題
時間Wed Jun 3 14:29:49 2009
我想做的一個東西是結合jcarousel和google map
(jcarousel:
http://sorgalla.com/jcarousel/
有蠻多種變型的
目前用到的是: Using jCarousel as a Textscroller
http://sorgalla.com/projects/jcarousel/examples/special_textscroller.html )
陳述一下大概的流程:
map 上有個 marker
click 後跳出 info-window
info-window 中再 show jcarousel 的內容
一個簡單的範例:
http://www.csie.nctu.edu.tw/~yhlu/jcarousel/index.htm
除了官網提供的lib，其他 js 和 css 都是直接複製範例上的 code
但是有改一小部分:
拿掉:
jQuery('
#mycarousel').jcarousel({
vertical: true,
size: 0,
initCallback: mycarousel_initCallback
});
移到 map event 裡:
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml('<div id="mycarousel"><ul></ul></div>');
jQuery('
#mycarousel').jcarousel({
vertical: true,
size: 0,
initCallback: mycarousel_initCallback
});
});
map.addOverlay(marker);
因為 mycarousel div 是 click marker 產生 info-window 後才會產生的
所以移到 event occurs 的 function 裡
目前主要遇到兩個問題:
1. 第一次 click marker 時，info-window 不會產生 jcarousel 的內容
必須要再一次click才會產生
這部份應該就是我前面提到我有修改的地方產生的問題
可是我不知道該怎改才對 >"<
2. 這一切在 FireFox 都跑得很順利，但是在 IE 就會跳出警告...
jCarousel: No width/height set for items.
This will cause an infinite loop. Aborting...
囧rz...
這應該是library本身設計的，
雖然我有trace code，不過因為不是看得很懂，所以以下是純猜測 >///<
如果放到 jcarousel-container 裡面的 item 沒有定義長寬
lib在計算 "畫面上可以看得到的item" 時 會造成無線迴圈
但是我不懂為什麼 FF 抓得到item的長寬 IE抓不到 orz...
btw 前面提到jcarousel有很多種變型
此篇文章遇到的問題主要是用 " Using jCarousel as a Textscroller "
但我之前有試過 (同樣放到 map 的 info-window)
" Carousel with dynamic content loading via Ajax from the Flickr API "
http://sorgalla.com/projects/jcarousel/examples/dynamic_flickr_api.html
是沒有這些問題滴 @@
版上各位強者如果知道問題出在哪 希望可以不吝告知
先說聲謝謝囉 <(_ _)>
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 140.113.215.200
※ hera1016:轉錄至看板 Web_Design 06/03 14:48