通過leaflet.js中的單擊事件自動刪除先前的標記並在地圖上添加新的標記

Question

我希望我的地圖通過單擊自動刪除舊標記並添加新標記，但是我不知道該怎么做。

var mapOptions = {
    center: [17.385044, 78.486671],
    zoom: 10
}
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var map = new L.map('mapid', mapOptions);
map.addLayer(layer);

map.on("click", function(e) {
    var mp = null;
    if (mp !== null) {
        map.removeLayer(mp);
    }
    var mp = new L.Marker([e.latlng.lat, e.latlng.lng]).addTo(map);
    alert(mp.getLatLng());
})

Answer 1

您需要跟蹤先前創建的標記，並在點擊事件中將其從地圖中刪除。

這是描述如何刪除/添加Leaflet標記的基本示例：

HTML ：

<div id="map" data-mode="">

</div>

JS ：

// add a tile layer to our map
var url = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
var attr = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  osm = L.tileLayer(url, {
    maxZoom: 18,
    attribution: attr
  });


// initialize the map 
var map = L.map('map').setView([25.92, 79.84], 5).addLayer(osm);

// click event
map.on('click', onMapClick);

// markers storage
var markers = [];

// Script for adding marker on map click
function onMapClick(e) {

  var geojsonFeature = {
    "type": "Feature",
    "properties": {},
    "geometry": {
      "type": "Point",
      "coordinates": [e.latlng.lat, e.latlng.lng]
    }
  }
  // remove previous marker
  if (markers.length > 0) {
    map.removeLayer(markers.pop());
  }
  var marker;

  L.geoJson(geojsonFeature, {

    pointToLayer: function(feature, latlng) {

      marker = L.marker(e.latlng, {

        title: "Resource Location",
        alt: "Resource Location",
        riseOnHover: true,
        draggable: true,

      });
      markers.push(marker)

      return marker;
    }
  }).addTo(map);
}

這是jsfiddle 。