在Leaflet中更新標記

Question

傳單中的標記有問題。 我的代碼是這樣的：

var updateMarker = function(lat, lng) {
    if($('.leaflet-marker-icon').length)
        marker.setLatLng([lat, lng]);
    else
        var marker = L.marker([lat, lng]).addTo(map);
    return false;
};
var updateMarkerByInputs = function() {
    return updateMarker( $('#latInput').val() , $('#lngInput').val());
}
$('#latInput').on('input', updateMarkerByInputs);
$('#lngInput').on('input', updateMarkerByInputs);

map.on('click', function(e) {
    $('#latInput').val(e.latlng.lat);
    $('#lngInput').val(e.latlng.lng);
    updateMarker(e.latlng.lat, e.latlng.lng);
});

如您所見，第一次點擊將添加一個標記，在下次點擊時應該更新。 但是我在第二次點擊時收到此錯誤：

TypeError: i is undefined
    ..."_leaflet_id";return function(i){return i[e]=i[e]||++t,i[e]}}(),invokeEach:funct...
leaflet.js (line 6, col 603)

我錯了什么？

Answer 1

您正在updateMarker函數中本地定義marker變量，因此一旦函數返回，引用就會丟失。

在函數外定義它：

var marker;

var updateMarker = function(lat, lng) {
    if($('.leaflet-marker-icon').length)
        marker.setLatLng([lat, lng]);
    else
        marker = L.marker([lat, lng]).addTo(map);
    return false;
};

這樣您就不需要使用jQuery檢查DOM以確定您的標記是否已定義，您可以直接檢查標記變量：

var marker;

var updateMarker = function(lat, lng) {
    if (marker) {
        marker.setLatLng([lat, lng]);
    } else {
        marker = L.marker([lat, lng]).addTo(map);
    }
    return false;
};

（為了提高可讀性，我建議在if語句中始終使用括號。）