web-dev-qa-db-ja.com

リーフレットのdragendイベントの後にlatlngを取得するにはどうすればよいですか？

マーカーを移動した後、マーカーの緯度/経度の値を更新しようとしています。提供されている例では、ポップアップウィンドウを使用して緯度/経度を表示しています。

マーカーの「奇妙な」イベントリスナーがありますが、e.latlngの値を警告すると、未定義が返されます。

javascript：

function markerDrag(e){
    alert("You dragged to: " + e.latlng);
}

function initialize() {
    // Initialize the map
    var map = L.map('map').setView([38.487, -75.641], 8);
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        maxZoom: 18
    }).addTo(map);

    // Event Handlers
    map.on('click', function(e){
        var marker = new L.Marker(e.latlng, {draggable:true});
        marker.bindPopup("<strong>"+e.latlng+"</strong>").addTo(map);

        marker.on('dragend', markerDrag);
    });
}


$(document).ready(initialize());

http://jsfiddle.net/rhewitt/Msrpq/4/

event-handlingleaflet
20
Roy

latlng値はe.latlngではなくe.target._latlngにあります。コンソールを使用します。

17
lintu

更新された位置の緯度を取得するには、e.target.getLatLng()を使用します。

    // Script for adding marker on map click
    function onMapClick(e) {

        var marker = L.marker(e.latlng, {
                 draggable:true,
                 title:"Resource location",
                 alt:"Resource Location",
                 riseOnHover:true
                }).addTo(map)
                  .bindPopup(e.latlng.toString()).openPopup();

        // #12 : Update marker popup content on changing it's position
        marker.on("dragend",function(e){

            var chagedPos = e.target.getLatLng();
            this.bindPopup(chagedPos.toString()).openPopup();

        });
    }

JSFiddleデモ

14
Kedar.Aitawdekar

e.target._latlngを使用している間は（ この他の回答 で提案されているように）、使用することをお勧めします

e.target.getLatLng();

これにより、プライベート変数が公開されなくなります。これは Leaflet で推奨されています。

プライベートプロパティとメソッドは、アンダースコア（_）で始まります。これはそれらを非公開にするのではなく、開発者に直接使用しないことをお勧めします。

8
user2441511

APIが変わったと思います。

今日は：const { lat, lng } = e.target.getCenter();

3
Aral Roca