Leaflet學習筆記-Leaflet.awesome-markers

基礎篇傳送門

http://www.cnblogs.com/CoffeeEddy/p/4919987.html

效果圖

是不是感覺很美觀啊

 

 

為什么選擇awesome

地圖上面需要各種各樣的Mark,難道要我們一個個去畫？

這個網站就有海量的圖標,並且最近有中文的鏡像網站（貌似我一開始用的時候還沒有...）

優點：免費（這個很重要~）、一個字體庫585個圖標、大小自由縮放等等

網址：http://fontawesome.dashgame.com/

 

Leaflet.awesome-markers插件下載

https://github.com/lvoogdt/Leaflet.awesome-markers

 

如何使用

引入

fonts文件（woff2可以刪掉，不然在Chrome里會有錯誤）可以去上面給的官網下載最新版 因為他一直在更新,你可以找到更多的圖標

js文件 leaflet.awesome-markers.js

css文件 font-awesome.min.css、font-awesome-ie7.min.css文件,后者是為了更好的兼容ie7

images文件 直接將images文件拷貝到目錄下面，因為里面包含了圖標的背景和陰影

JS代碼

//設置Mark
markList[i].setIcon(
               L.AwesomeMarkers.icon({
                    icon: 'bookmark', prefix: 'fa',       
                    markerColor: 'red', 
                    iconColor: iconColorPicker, spin: true
                }));                    

icon-圖標名稱

prefix：'fa'這個不需要改 這個是awesome的樣式

markerColor-圖標底色,這個是有限制的,下面是對照表,只需要輸入value即可 我這個是放在select中的

iconColor-圖標顏色,這個可以隨意輸入顏色值,#xxx

spin-是否轉動（ture/false）這個可以使圖標旋轉起來

 

好了 基本就是這樣了

 轉載請注明地址：http://www.cnblogs.com/CoffeeEddy/p/Leaflet.html