【Leafletjs】2.添加marker到地图

Leaflet Marker API地址

http://leafletjs.com/reference.html#marker

接着上篇我们在地图中添加一个marker,非常简单只需添加如下代码即可:

var marker = L.marker([30, 118])
.addTo(map);

Demo:http://jsfiddle.net/shitao1988/KDr4B/1/

给这个marker添加一个弹出框

var marker = L.marker([30, 118])
.addTo(map)
.bindPopup("<b>中国</b><br>安徽黄山.")
.openPopup();

结果如下:

【Leafletjs】2.添加marker到地图

设置Marker相关属性项:

{draggable: true, // 使图标可拖拽
title: ‘Text‘, // 添加一个标题
opacity: 0.5} // 设置透明度
)

Demo:http://jsfiddle.net/shitao1988/KDr4B/2/

下面是marker相关的插件:

1. Leaflet.awesome-markers:提供了丰富多彩的图标

【Leafletjs】2.添加marker到地图

Demo:http://jsfiddle.net/VPzu4/92/

2.Leaflet.markercluster:强大的集聚插件

【Leafletjs】2.添加marker到地图

 

3.Leaflet.label:美化的label

【Leafletjs】2.添加marker到地图

4.Leaflet.AnimatedMarker:使marker沿线运动

5.leaflet.bouncemarker:加载marker时有个弹跳动画

6.OverlappingMarkerSpiderfier-Leaflet:处理重叠在一起的markers

【Leafletjs】2.添加marker到地图

7.Leaflet.EdgeMarker:在边框上显示不在当前视野中的marker

【Leafletjs】2.添加marker到地图

 

 本人建了一个Leaflet交流群:Leaflet&WebGIS  331437754

【Leafletjs】2.添加marker到地图

上一篇:jQuery 做好七件事帮你提升jQuery的性能


下一篇:《CSS Mastery》读书笔记(4)