Leaflet marker拖拽

原先一直用https://github.com/Leaflet/Leaflet.Editable的插件来实现编辑

这次项目只需对marker进行移动，因此想看看能否不通过插件实现此功能

答案：可以

HTML

1 <div id="map"></div>
2 <div id="ctrlbox">
3   <label><input id="ctrlDragge" type="checkbox"/>移动Marker</label>
4 </div>

JS

 1         var marker1 = L.marker([30.75, 120.75]).addTo(this.map);
 2         var marker2 = L.marker([30.76, 120.76], { draggable: true }).addTo(this.map);
 3 
 4         //拖拽结束
 5         marker2.on('dragend', function (event) {
 6             var position = marker1.getLatLng();
 7             console.log('实时坐标：' + marker2.getLatLng());
 8         })
 9         //marker1.on('moveend ', function (e) {
10         //    console.log(e.target._latlng);
11         //});
12 
13         $('#ctrlDragge').on('change', function () {
14             var isCheck = this.checked;
15             if (isCheck) {
16                 marker1.dragging.enable();
17             } else {
18                 marker1.dragging.disable();
19                 console.log(marker1.getLatLng());
20             }
21         });

marker1：通过checkbox开关实现开启/关闭拖拽功能

marker2：通过options中draggable参数实现拖拽

 

posted @ 2018-11-17 21:48  咖啡漩涡  阅读(5013)  评论(2)  编辑  收藏  举报