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
Leaflet学习笔记-Leaflet.awesome-markers的更多相关文章
- Leaflet学习笔记-基础内容
为什么选择Leaflet 开源,且代码仅有 31 KB,但它具有开发人员开发在线地图的大部分功能(80%的功能) 是不是比arcgis要小很多呢 官网:http://leafletjs.com/ 劣势 ...
- Leaflet学习笔记(一)
一.简介 Leaflet是一个主要适用于移动端交互地图的领先的开源javascript库.虽然js库只有38KB左右,但是却能满足大部分开发者的所有功能需求. Leaflet拥有着简单,高效和实用的设 ...
- GMap学习笔记
GMap学习笔记 1.GMap体系详解 What is the map control (GMapControl)? This is the control which renders the map ...
- python数据分析入门学习笔记
学习利用python进行数据分析的笔记&下星期二内部交流会要讲的内容,一并分享给大家.博主粗心大意,有什么不对的地方欢迎指正~还有许多尚待完善的地方,待我一边学习一边完善~ 前言:各种和数据分 ...
- OpenCV 学习笔记 04 深度估计与分割——GrabCut算法与分水岭算法
1 使用普通摄像头进行深度估计 1.1 深度估计原理 这里会用到几何学中的极几何(Epipolar Geometry),它属于立体视觉(stereo vision)几何学,立体视觉是计算机视觉的一个分 ...
- 机器学习实战(Machine Learning in Action)学习笔记————09.利用PCA简化数据
机器学习实战(Machine Learning in Action)学习笔记————09.利用PCA简化数据 关键字:PCA.主成分分析.降维作者:米仓山下时间:2018-11-15机器学习实战(Ma ...
- python数据分析入门学习笔记儿
学习利用python进行数据分析的笔记儿&下星期二内部交流会要讲的内容,一并分享给大家.博主粗心大意,有什么不对的地方欢迎指正~还有许多尚待完善的地方,待我一边学习一边完善~ 前言:各种和数据 ...
- [转载]pytest学习笔记
pytest学习笔记(三) 接着上一篇的内容,这里主要讲下参数化,pytest很好的支持了测试函数中变量的参数化 一.pytest的参数化 1.通过命令行来实现参数化 文档中给了一个简单的例子, ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
随机推荐
- Java中Map的使用
Map以按键/数值对的形式存储数据,和数组很类似,在数组中存在的索引,它们本身也是对象. Map的接口 Map---实现Map Map.Entry--Map的内部类 ...
- oracle 查看表属主和表空间sql
查看表空间 select * from user_tablespaces where table_name = 'TableName' 查看表属主 select Owner from all_ta ...
- Java基础知识强化之集合框架笔记72:集合特点和数据结构总结
1. 集合 (1)Collection(单列集合) List(有序,可重复): ArrayList:底层数据结构是数组,查询块,增删慢.线程不安全,效率 ...
- Android(java)学习笔记166:Java中输入和输出流概念
程序在内存中运行,文件在磁盘上,把文件从磁盘上读入内存中来,当然是输入流了, 反之,把内存中的数据写到磁盘上的文件里面去就是输出.通常都是这样的,用了过滤流的情况复杂一些,则另当别论.
- 关于js原型的面试题
今天遇到关于javascript原型的一道面试题,现分析下: 原题如下: function A(){ } function B(a){ this.a = a; } function C(a){ if( ...
- 练习题之ThreadLocal
public class ThreadLocalMain { private static ThreadLocal<Integer> value = new ThreadLocal< ...
- Linq常用查询运算符
Linq一共包含五十几个查询运算符,常用的根据类型来区分一共有5类左右,这五类里面一些事在项目查询中经常用到的.不过linq运算符的命名十分规范,基本从字面意思就能猜测出来是干嘛用的,下面我们挑选一些 ...
- Path类
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...
- 【SQL】Update中使用表别名、如何用表中一列值替换另一列的所有值
Update中使用表别名 select中的表别名: select * from TableA as ta update中的表别名: update ta from TableA as ta 如何用表中一 ...
- dumpbin工具的使用
当我们需要查看一个dll或exe文件中的包含的函数或是依赖的函数之类的信息,可以使用Visual Studio自带的工具dumpbin来实现,使用方法为: 1/ 启动Visual Studio 命令行 ...