天天看點

【高德地圖API】從零開始學高德JS API(三)覆寫物

摘要:覆寫物,是一張地圖的靈魂。有覆寫物的地圖,才是完整的地圖。在一張地圖上,除了底層的底圖(瓦片圖,矢量圖),控件(有功能可操作的工具),最重要最不可缺少的就是覆寫物了。覆寫物有多種,包括,标注、折線、多邊形、資訊視窗、聚合marker、麻點圖和圖檔覆寫物。本文會詳細介紹每一種覆寫物的概念,添加方法,修改方法,移除方法等。最後會提供示例和源代碼下載下傳。

示例demo:

【高德地圖API】從零開始學高德JS API(三)覆寫物

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

一、标注marker

最常見的覆寫物就是标注(marker),用它可以标示出店鋪的位置,你所在的位置,連鎖店的分布圖等,可以把标注簡單了解為1個點。

在地圖上增加一個标注,又稱之為在地圖上“打點”。打點工具在上一章《控件》中已經詳細講解,控件: 。

溫馨有愛的小貼士:

标注marker的圖檔可以是gif圖,讓marker“動”起來。

1、添加标注——“可愛的趙靈兒”

【高德地圖API】從零開始學高德JS API(三)覆寫物

icon是标注的圖檔位址,想用什麼圖檔,就把圖檔位址放在這裡。

position是标注的位置,經緯度。

2、修改标注——“一秒鐘變拓跋玉兒”

【高德地圖API】從零開始學高德JS API(三)覆寫物

setContent是用于改變文字說明,支援html5;

setPosition是用于改變标注的位置。

3、清除覆寫物

對于制定marker,可以單獨清除每一個覆寫物:

清除地圖上全部覆寫物,用:

二、聚合marker

1、增加一個marker

溫馨小貼士:

不如icon的值為空,就會調用高德預設的marker喲,也蠻漂亮的。

【高德地圖API】從零開始學高德JS API(三)覆寫物

2、給marker加上動畫

跳動動畫

拖拽動畫

拖拽動畫需要在marker裡面設定。

3、聚合marker

增加一群marker,就是聚合marker

溫馨小貼士:為什麼要使用聚合marker?

當marker大于500的時候,滿螢幕都是密密麻麻的marker了,顯得雜亂無章。

而且由于浏覽器性能的關系,特别是IE6浏覽器,會造成浏覽器卡死的情況。

這個時候,使用麻點圖或者聚合marker就可以輕松解決marker數量太多的問題。

增加一群marker:

【高德地圖API】從零開始學高德JS API(三)覆寫物

增加marker聚合的功能:

【高德地圖API】從零開始學高德JS API(三)覆寫物

縮小地圖,marker會變得更加集中。

增加一個延時延時的功能,先添加500的marker,一秒鐘後變成聚合marker。

【高德地圖API】從零開始學高德JS API(三)覆寫物

三、麻點圖

高德雲圖是實時渲染的,在背景更改資料後,能在前台直覺的看到資料展示。

免去了切圖啊,制作瓦片圖,對準經緯度等一系列的麻煩。

【高德地圖API】從零開始學高德JS API(三)覆寫物

1、登入雲圖,輕松制作麻點圖:

點選建立地圖

【高德地圖API】從零開始學高德JS API(三)覆寫物

2、導入資料

手工導入資料,可視化一站式操作,适合少量點:

【高德地圖API】從零開始學高德JS API(三)覆寫物

自動導入資料,适合大批量資料:

第一行必須是字段名,隻能是字母、數字和下劃線,并且不能以數字開頭。

經緯度必須分開成2個字段!

檔案隻支援 .csv 格式、UTF-8編碼,資料量不超過 10,000 條,檔案大小不超過10M、字段總數不超過 40 個。

字段命名規則:以英文字母開頭,僅由英文字母、數字、下劃線組成,字段名長度不超過20位。

【高德地圖API】從零開始學高德JS API(三)覆寫物

建立表格資料,可以打開一個記事本,編碼改為UFT-8模式。然後導入資料。

資料格式舉例:

【高德地圖API】從零開始學高德JS API(三)覆寫物

資料導入後,就是這樣子的。大家點選預覽,就可以擷取一個url了。

然後大家可以直接用iframe的形式,把标注好的地圖放到自己的網站上。

雲圖實時渲染:

【高德地圖API】從零開始學高德JS API(三)覆寫物
【高德地圖API】從零開始學高德JS API(三)覆寫物

接下來,大家如果要使用雲索引,雲檢索,使用這個教程:

三甲醫院例子:

東莞酒店例子:

貪官羅馬圖:

四、折線,行車記錄儀,軌迹回放

1、折線

【高德地圖API】從零開始學高德JS API(三)覆寫物

2、讓軌迹動起來

3、讓軌迹暫停

【高德地圖API】從零開始學高德JS API(三)覆寫物

五、圓形,多邊形

圓形

【高德地圖API】從零開始學高德JS API(三)覆寫物

多邊形

【高德地圖API】從零開始學高德JS API(三)覆寫物

六、資訊視窗

1、預設資訊視窗

【高德地圖API】從零開始學高德JS API(三)覆寫物

2、自定義資訊視窗

【高德地圖API】從零開始學高德JS API(三)覆寫物

自定義資訊視窗,需要CSS樣式支援

七、廈門鼓浪嶼地圖

大家可以使用圖檔覆寫物,實作各種園區圖,廠區圖,校園圖,手繪風格地圖等。

在網上找好手繪地圖,我找到的是鼓浪嶼手繪地圖。把它扣空,做成png-24的透明圖檔。

然後确定圖檔的左下角和右上角。把圖檔貼上去。效果不錯。

【高德地圖API】從零開始學高德JS API(三)覆寫物

繼續閱讀