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

我的表单字段在第一次双击时不会更新，但会在下次双击时获得更新。标记dragend后，表单字段不会更新;为什么呢？

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

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>

顺便说一句，你知道为什么这段代码不起作用但是getElementById有效吗？

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

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

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

单张更新位置标记的dragend

1 个答案: