通过单击地图图层更改标记位置

Question

我希望能够让用户单击传单地图中的 geoJSON 图层，然后在他们单击的位置显示带有自定义图标的标记。如果他们再次点击图层，我想删除原来的标记，然后在最新的点击位置添加一个新的标记。

我可以使用 Leaflet 中的默认图标使其工作，但是当我指定自定义图标时，它会失败，返回错误：TypeError: t.icon.createIcon is not a function。

这行得通：

function onEachFeature(feature, layer) {
    layer.on('click', function(e) {
        lat = feature.geometry.coordinates[1];
        lng = feature.geometry.coordinates[0];                  
        mymap.on('click', function (e) {
            if (marker) {
                mymap.removeLayer(marker);
            }
            marker = new L.Marker([lat,lng]).addTo(mymap);
        });
    });
}

但这没有（只添加{icon: marker}：

var marker = L.icon({
    iconUrl: 'https://raw.githubusercontent.com/evantdailey/map_testing/master/dot.png',
    iconSize: [20,20],
});
function onEachFeature(feature, layer) {
    layer.on('click', function(e) {
        lat = feature.geometry.coordinates[1];
        lng = feature.geometry.coordinates[0];                  
        mymap.on('click', function (e) {
            if (marker) {
                mymap.removeLayer(marker);
            }
            marker = new L.Marker([lat,lng], {icon: marker}).addTo(mymap);
        });
    });
}

你猜我做错了什么？

Answer 1

我弄清楚出了什么问题，这是仔细命名变量的一个很好的教训。原来的 marker 变量（现在是 markerIcon）被重新分配给地图上的实际事物。这适用于第一次点击，但随后点击 marker 引用地图上的东西，而不是图标定义，所以 JS 感到困惑。

添加var marker; 并将图标定义重命名为markerIcon 解决了混淆。

现在可以了：

var marker;
var markerIcon = L.icon({
    iconUrl: 'https://raw.githubusercontent.com/evantdailey/map_testing/master/dot.png',
    iconSize: [20,20],
});    
function onEachFeature(feature, layer) {
    layer.on('click', function(e) {
        lat = feature.geometry.coordinates[1];
        lng = feature.geometry.coordinates[0];          
        mymap.on('click', function (e) {
            if (marker) {
                mymap.removeLayer(marker);
            }
            marker = new L.Marker([lat,lng], {icon: markerIcon}).addTo(mymap);
        });
    });
}