我最近在公司和師哥學習js,用來對www.51ditu.com進行優(yōu)化。把一些學習的點滴放在這里。
本文要記錄是怎么實現(xiàn)www.51ditu.com中point點的tips框中怎么顯示當前point是否有寶物!
首先我需要構(gòu)建好這個tip框中的html:
html += "<tr><td id='Baowu'></td></tr></table></div>";
var m = getMarker(poi.point, i+1, tmp.n, html);//調(diào)用函數(shù)生成marker
LTEvent.bind(m,"viewstylechange",m,onViewStyleChange);
當中的 getMarker是實實在在的產(chǎn)生tips的函數(shù),他會限定好樣式和格式,并且將內(nèi)容的html來填充!
最后一句話很關(guān)鍵,師哥將onViewStyleChange這個函數(shù)綁定在marker上!
在getMarker這個函數(shù)中觸發(fā)viewstylechange,并且傳遞一個參數(shù)過來!
LTEvent.trigger(this,"viewstylechange",[v]);
繼而下面的增加寶物的方法被觸發(fā):
function onViewStyleChange(v)
{
if(v!=2){return;}
var jload = JsLoader.getInstance();
//callback
jload.setFun(LTEvent.getCallback(this,treasure));
jload.connect( " );
}
當中的jload會使用ajax方法來判斷當前地點是不是有寶物!他的回調(diào)函數(shù)是: jload.setFun(LTEvent.getCallback(this,treasure));
function treasure(){
//獲取到marker中的屬性,這就是上邊把onViewStyleChange這個函數(shù)綁定在marker上的主要目的!
alert(this.mname);
}
在這個函數(shù)中我通過dom解析,找到 html += "<tr><td id='Baowu'></td></tr></table></div>";將相應(yīng)的html補充!
以上純屬紀錄,我自己也在學習!
真實效果請關(guān)注:www.51ditu.com,對于js部分可以參見:http://api.51ditu.com
效果如下:
