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
                }));                    

View Code

icon-图标名称

prefix：'fa'这个不需要改 这个是awesome的样式

markerColor-图标底色,这个是有限制的,下面是对照表,只需要输入value即可 我这个是放在select中的

iconColor-图标颜色,这个可以随意输入颜色值,#xxx

spin-是否转动（ture/false）这个可以使图标旋转起来

 

好了 基本就是这样了

 转载请注明地址：http://www.cnblogs.com/CoffeeEddy/p/Leaflet.html

转载于:https://www.cnblogs.com/CoffeeEddy/p/Leaflet.html