在使用leaflet中,绘制了点位,但是当我点击按钮,编辑的时候,能拖动这些点位,在拖动完成后,点击保存,保存这些点位的当前坐标
时间: 2023-11-20 16:07:15 浏览: 32
可以使用Leaflet的Draggable插件来实现拖动功能,具体步骤如下:
1. 在引入Leaflet的JS文件后,引入Draggable插件的JS文件和CSS文件。
2. 创建一个Marker对象,并将其添加到地图中。
```
var marker = L.marker([latitude, longitude], { draggable: true }).addTo(map);
```
3. 给Marker对象添加dragend事件,当拖动完成后,获取当前位置的经纬度。
```
marker.on('dragend', function(event) {
var marker = event.target;
var position = marker.getLatLng();
latitude = position.lat;
longitude = position.lng;
});
```
4. 在保存按钮的click事件中,保存当前位置的经纬度。
```
saveButton.on('click', function() {
// 保存经纬度
saveCoordinates(latitude, longitude);
});
```
注意:在保存经纬度时,要自己实现保存的逻辑,这里只提供了获取经纬度的方法。
相关问题
leaflet 在绘制图像时给可编辑点位排序
我可以回答这个问题。在使用 Leaflet 绘制图像时,可以使用 L.Polyline.Edit 中的方法进行可编辑点位的排序。具体方法是使用 L.Polyline.getLatLngs() 获取所有点位,然后使用 Array.sort() 方法对点位进行排序,最后使用 L.Polyline.setLatLngs() 方法重新设置点位。这样就可以对可编辑点位进行排序了。
leaflet 在绘制图像时给可编辑点位方块中间填入数字排序
我可以回答这个问题。在 Leaflet 中,可以使用 L.DivIcon 和 L.Marker 来创建可编辑的点位,并在方块中间填入数字排序。具体实现方法可以参考 Leaflet 官方文档中的相关示例。
相关推荐
![vue](https://img-home.csdnimg.cn/images/20210720083646.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![vue](https://img-home.csdnimg.cn/images/20210720083646.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)