摘要:覆寫物,是一張地圖的靈魂。有覆寫物的地圖,才是完整的地圖。在一張地圖上,除了底層的底圖(瓦片圖,矢量圖),控件(有功能可操作的工具),最重要最不可缺少的就是覆寫物了。覆寫物有多種,包括,标注、折線、多邊形、資訊視窗、聚合marker、麻點圖和圖檔覆寫物。本文會詳細介紹每一種覆寫物的概念,添加方法,修改方法,移除方法等。最後會提供示例和源代碼下載下傳。
示例demo:
-------------------------------------------------------------------------------------------------
一、标注marker
最常見的覆寫物就是标注(marker),用它可以标示出店鋪的位置,你所在的位置,連鎖店的分布圖等,可以把标注簡單了解為1個點。
在地圖上增加一個标注,又稱之為在地圖上“打點”。打點工具在上一章《控件》中已經詳細講解,控件: 。
溫馨有愛的小貼士:
标注marker的圖檔可以是gif圖,讓marker“動”起來。
1、添加标注——“可愛的趙靈兒”
icon是标注的圖檔位址,想用什麼圖檔,就把圖檔位址放在這裡。
position是标注的位置,經緯度。
2、修改标注——“一秒鐘變拓跋玉兒”
setContent是用于改變文字說明,支援html5;
setPosition是用于改變标注的位置。
3、清除覆寫物
對于制定marker,可以單獨清除每一個覆寫物:
清除地圖上全部覆寫物,用:
二、聚合marker
1、增加一個marker
溫馨小貼士:
不如icon的值為空,就會調用高德預設的marker喲,也蠻漂亮的。
2、給marker加上動畫
跳動動畫
拖拽動畫
拖拽動畫需要在marker裡面設定。
3、聚合marker
增加一群marker,就是聚合marker
溫馨小貼士:為什麼要使用聚合marker?
當marker大于500的時候,滿螢幕都是密密麻麻的marker了,顯得雜亂無章。
而且由于浏覽器性能的關系,特别是IE6浏覽器,會造成浏覽器卡死的情況。
這個時候,使用麻點圖或者聚合marker就可以輕松解決marker數量太多的問題。
增加一群marker:
增加marker聚合的功能:
縮小地圖,marker會變得更加集中。
增加一個延時延時的功能,先添加500的marker,一秒鐘後變成聚合marker。
三、麻點圖
高德雲圖是實時渲染的,在背景更改資料後,能在前台直覺的看到資料展示。
免去了切圖啊,制作瓦片圖,對準經緯度等一系列的麻煩。
1、登入雲圖,輕松制作麻點圖:
點選建立地圖
2、導入資料
手工導入資料,可視化一站式操作,适合少量點:
自動導入資料,适合大批量資料:
第一行必須是字段名,隻能是字母、數字和下劃線,并且不能以數字開頭。
經緯度必須分開成2個字段!
檔案隻支援 .csv 格式、UTF-8編碼,資料量不超過 10,000 條,檔案大小不超過10M、字段總數不超過 40 個。
字段命名規則:以英文字母開頭,僅由英文字母、數字、下劃線組成,字段名長度不超過20位。
建立表格資料,可以打開一個記事本,編碼改為UFT-8模式。然後導入資料。
資料格式舉例:
資料導入後,就是這樣子的。大家點選預覽,就可以擷取一個url了。
然後大家可以直接用iframe的形式,把标注好的地圖放到自己的網站上。
雲圖實時渲染:
接下來,大家如果要使用雲索引,雲檢索,使用這個教程:
三甲醫院例子:
東莞酒店例子:
貪官羅馬圖:
四、折線,行車記錄儀,軌迹回放
1、折線
2、讓軌迹動起來
3、讓軌迹暫停
五、圓形,多邊形
圓形
多邊形
六、資訊視窗
1、預設資訊視窗
2、自定義資訊視窗
自定義資訊視窗,需要CSS樣式支援
七、廈門鼓浪嶼地圖
大家可以使用圖檔覆寫物,實作各種園區圖,廠區圖,校園圖,手繪風格地圖等。
在網上找好手繪地圖,我找到的是鼓浪嶼手繪地圖。把它扣空,做成png-24的透明圖檔。
然後确定圖檔的左下角和右上角。把圖檔貼上去。效果不錯。