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里会有错误）可以去上面给的官网下载最新版因为他一直在更新,你可以找到更多的图标

Leaflet学习笔记-Leaflet.awesome-markers

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中的

Leaflet学习笔记-Leaflet.awesome-markers

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

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

好了基本就是这样了

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

秒客网

Leaflet学习笔记-Leaflet.awesome-markers

相关文章