Question

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

我可以使用Leaflet中的默认图标来实现此功能，但是当我指定自定义图标时，它会失败，返回错误：ConfigPackage。

这有效：

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}

猜猜我做错了什么？

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);
        });
    });
}

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

1 个答案: