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

View Code