web-dev-qa-db-ja.com

leaflet.js-クリック時にマーカーを設定し、ドラッグ時に位置を更新

私が取り組んでいる小さなプロジェクトの場合、マーカーがleaflet.js搭載のイメージマップに配置され、ドラッグされた場合にこのマーカーの位置を更新できるようにする必要があります。次のコードを使用してこれを試しましたが、失敗します。 「マーカーが定義されていません」というエラーが表示されます。なぜ機能しないのかわかりません。たぶん、皆さんが私を助けてくれるでしょうか。 ;）

function onMapClick(e) {
    gib_uni();
    marker = new L.marker(e.latlng, {id:uni, icon:redIcon, draggable:'true'};
    map.addLayer(marker);
};

marker.on('dragend', function(event){
    var marker = event.target;
    var position = marker.getLatLng();
    alert(position);
    marker.setLatLng([position],{id:uni,draggable:'true'}).bindPopup(position).update();
});
javascriptjquerymapsmarkerleaflet
14
kirijanker

上記のコードスニペットでは、イベントハンドラーの追加時にマーカーは定義されていません。マーカーの作成直後にdragendリスナーが追加される次のことを試してください。

function onMapClick(e) {
    gib_uni();
    marker = new L.marker(e.latlng, {id:uni, icon:redIcon, draggable:'true'});
    marker.on('dragend', function(event){
            var marker = event.target;
            var position = marker.getLatLng();
            console.log(position);
            marker.setLatLng(position,{id:uni,draggable:'true'}).bindPopup(position).update();
    });
    map.addLayer(marker);
};

また、新しいL.Marker（）行の終わりにブラケットがありませんでした。

また、positionをsetLatLngへの呼び出しで配列に入れましたが、それはすでにLatLngオブジェクトです。

26
user2680198