更新小冊子中的標記

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聲明中始終使用括號。）