在Leaflet中更新标记

时间:2015-09-06 09:26:27

标签: javascript jquery leaflet

传单中的标记有问题。我的代码是这样的:

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)

我错了什么?

1 个答案:

答案 0 :(得分:4)

您正在marker函数中本地定义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语句中始终使用括号。)