javascript - 传单在标记的拖尾上更新位置

Question

我想根据标记位置更新表单上两个隐藏字段的值。我读了这个link得到我的答案，这是我的最终代码

<script>
    var map = L.map('map', {
        center: [33.505, 53.9],
        zoom: 5
    });
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    map.on('dblclick', addMarker);

    var Marker;

    function addMarker(e) {
        //remove previous markers
        if (Marker) {
            map.removeLayer(Marker);
            UpdateLatLng(e);
        }
        // Add marker to map at click location; add popup window
        Marker = new L.marker(e.latlng, {
            draggable: true
        }).addTo(map);
    }

    function UpdateLatLng(e) {
        var latValue, lngValue;
        latValue = e.latlng.lat;
        lngValue = e.latlng.lng;
        document.getElementById("map_lat").value = latValue;
        document.getElementById("map_lng").value = lngValue;
        //$("#map_lat").val() = latValue;
    }
    function UpdateLatLng2(e) {
        var latValue, lngValue;
        var position = marker.getLatLng();
        latValue = position.lat;
        lngValue = position.lng;
        document.getElementById("map_lat").value = latValue;
        document.getElementById("map_lng").value = lngValue;
        //$("#map_lat").val() = latValue;
    }
    Marker.on('dragend', UpdateLatLng2);
</script>

结果是我的表单字段在第一次双击事件时没有更新，但它们在下一次双击或标记的 dragend 事件之后更新。为什么？

为什么下面的代码不能工作而 getElementById 可以工作？

$("#map_lat").val() = latValue;

如有任何帮助，我们将不胜感激。

Answer 1

My form fields are not updated on the first double click, but get updated on the next double clicks. The form fields don't get updated after marker dragend; why?

这是您的脚本第一次运行的方式，

map.on('dblclick', addMarker); //|You attach the double click event handler.
var Marker; //|You instansiate an undefined variable.

function addMarker(e) {
    if (Marker) { //|On the first double click, Marker is undefined. Your code will not get into this if condition.
        map.removeLayer(Marker);
        UpdateLatLng(e); // But your function is here.
    }
    // Add marker to map at click location; add popup window
    Marker = new L.marker(e.latlng, {
        draggable: true
    }).addTo(map);
}

在第一次双击时，UpdateLatLng(e) 将永远不会被调用，因为您的 Marker 未定义。第二次双击，它就会被调用。

您可以像这样更新您的 addMarker 函数，

function addMarker(e) {
    //remove previous markers
    if (Marker) {
        map.removeLayer(Marker);
    }
    // Add marker to map at click location; add popup window
    Marker = new L.marker(e.latlng, {
        draggable: true
    }).addTo(map);

    UpdateLatLng(e);
}

但这是更新标记位置的最糟糕的方法。我建议您的代码更像是，

<script>
    var map = L.map('map', {
        center: [33.505, 53.9],
        zoom: 5
    });
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    map.on('dblclick', addOrUpdateMarkerPosition);

    var Marker;

    function addOrUpdateMarkerPosition(e) {
        if (!Marker) {
            // Marker is undefined, create a new marker..
            // Add marker to map at click location; add popup window
            Marker = new L.marker(e.latlng, {
                draggable: true
            }).addTo(map);

            // Bind the event handlers
            Marker.addListener('dragend', UpdateLatLng2);
        }
        else {
            // Marker already exists, just update the position
            Marker.setPosition(e.latlng);
        }

    }

    function UpdateLatLng(e) {
        var latValue, lngValue;
        latValue = e.latlng.lat;
        lngValue = e.latlng.lng;
        document.getElementById("map_lat").value = latValue;
        document.getElementById("map_lng").value = lngValue;
    }
    function UpdateLatLng2(e) {
        var latValue, lngValue;
        var position = marker.getLatLng();
        latValue = position.lat;
        lngValue = position.lng;
        document.getElementById("map_lat").value = latValue;
        document.getElementById("map_lng").value = lngValue;
    }
</script>

BTW, do you know why this code is not working but getElementById works?

$("#map_lat").val() = latValue;

此代码使用 javascript 外部库，即 jQuery。而 getElementById 是纯 JS，不需要任何库。要使用它，您基本上只需在页面中包含以下脚本。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>