Leaflet js:如何在地图上绘制任何标记结束时获取 Lat 和 lng

2022-01-12 00:00:00 leaflet javascript

我有一个很接近的代码，但我不确定，因为我是第一次使用 Leaflet js.

i got a one code which is close but i am not sure because i am first time working with Leaflet js.

我的意图是:假设 Leaflet js 正在显示地图或非地理数据，并且我有一个 Leaflet js 相关的工具栏.工具栏有许多标记，如圆形、多边形、方形等.当用户单击工具栏上的任何标记开始在地图上绘制时，当标记的绘制完成时，我怎么知道?

my intention is: suppose Leaflet js is showing map or non geographical data and i have one Leaflet js related toolbar. toolbar has many marker like circle, poly, square etc. when user click on any marker on toolbar to start drawing on map then when drawing of marker will be finish then how do i know?

我如何附加一个函数，该函数将作为绘图完成的回调，并且该函数还让我知道标记的 Lat 和 lng.如果我知道 Lat 和 lng，那么我可以保存在 db 中，然后我们可以重复使用它来绘制形状.

how could i attach a function which will work as callback for drawing finish and the function also let me know the Lat and lng of marker. if i know the Lat and lng then i can save in db and later we can reuse it to draw the shape.

var map = L.map('mapcanvas').setView([51.505, -0.09], 13);

map.on('click', function(e){
    // Place marker
    var marker = new L.marker(e.latlng).addTo(map);

    // Ajax query to save the values:
    var data = {
        lat: e.latlng.lat,
        lng: e.latlng.lng
    }

    // saving lat and lng to db by ajax call
    var request = new XMLHttpRequest();
        request.open('POST', '/my/url', true);
        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        request.send(data);
});

请看一下代码，我不确定它是否能解决我的目的，因为这里的代码适用于带有地图的点击事件.

please have a look at the code and i am not sure does it solve my purpose because here the code work with click event with map.

所以当我们点击地图时，标记绘制就完成了.所以请阅读我的帖子并了解我在寻找什么，并建议我最好地了解如何实现它.谢谢

so when we click on map then marker drawing would be complete. so please read my post and understand what i am looking for and suggest me with best idea how to achieve it. thanks

推荐答案

取决于您使用什么来绘制多边形/形状.如果您使用的是 leaflet.draw，您可以执行以下操作:

Depends on what you're using to draw polygons/shapes. If you're using leaflet.draw, you would do something like:

map.on('draw:created', function(e) {
    var points = JSON.stringify(e.layer.toGeoJSON());
});

然后将点保存到您的数据库中.

And then saving points to your database.

阅读leaflet.draw 文档，它非常完整和简单.

Read the leaflet.draw documentation, it's pretty complete and straightforward.

相关文章