首页 > Web开发 > 详细

【Leafletjs】2.添加marker到地图

时间:2014-02-05 16:32:46      阅读:2079      评论:0      收藏:0      [点我收藏+]

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

结果如下:

bubuko.com,布布扣

设置Marker相关属性项:

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

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

下面是marker相关的插件:

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

bubuko.com,布布扣

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

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

bubuko.com,布布扣

 

3.Leaflet.label:美化的label

bubuko.com,布布扣

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

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

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

bubuko.com,布布扣

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

bubuko.com,布布扣

 

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

【Leafletjs】2.添加marker到地图

原文:http://www.cnblogs.com/shitao/p/3538246.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!