更新小册子中的标记

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函数中本地定义您的变量，因此只要函数返回，引用就会丢失。

定义它的功能外：

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声明中始终使用括号。）