天天看點

【百度地圖API】——如何用label制作簡易的房産标簽

摘要:

  最近,API愛好者們紛紛說,自定義marker太複雜了!不僅定義複雜,連所有的dom事件都要自己重新定義。有沒有快速簡易建立房産标簽的方法呢?

  答案當然是有的啦~

  我們可以利用label嘛!

-------------------------------------------------------------------------------

一、建立地圖

這是老生常談的三句話,初始化地圖的js。

  

二、添加文本标簽

文本标注預設的樣子是這樣滴,如下圖:

【百度地圖API】——如何用label制作簡易的房産标簽

我覺得label最棒的一點是,它不僅僅是文本标簽而已,還能寫成<a></a>連結的方式。

這樣,你的label可以連結到任意一個網頁上。

三、設定文本标簽的樣式。關鍵!!!

【百度地圖API】——如何用label制作簡易的房産标簽

建立完畢的房産标注見上圖,你可以更換圖檔,讓房産标簽看起來更好看!!

以下的代碼,用來設定lable的CSS。你可以書寫任意的CSS,注意,如果是font-size這樣的CSS屬性,你要寫成駝峰式,fontSize這樣的,才能被識别。

四、全部源代碼

-----------------------------------------------------------------------------------------------

不過,用label制作的房産标注,畢竟不是正規标注marker,而是文字标簽label。是以,會有一些小缺陷。

如果你能忍受它們,那就大膽地使用label吧~

1、不能像marker那樣,能拖動。enableDragging

2、設定不了a:hover,就是說滑鼠放到label上時,背景圖檔不能變。

3、不能添加資訊視窗(謝謝JZ1108的提醒,lable是可以添加資訊視窗的~)2011.8.26更新

【百度地圖API】——如何用label制作簡易的房産标簽

如果你忍受不了以上兩點,請使用自定義marker來制作房産标注。雖然代碼看上去有點兒多。但條理很清晰~

<a href="http://www.cnblogs.com/milkmap/archive/2011/04/18/2019906.html">【百度地圖API】你看過房産地圖嗎?你知道房産标注是如何建立的嗎?</a>

<a href="http://www.cnblogs.com/milkmap/archive/2011/04/18/2019906.html">http://www.cnblogs.com/milkmap/archive/2011/04/18/2019906.html</a>

繼續閱讀