在 Leaflet 中获取多个标记

Question

我正在寻找在地图上添加可拖动标记，为它们命名，然后将所有标记返回名称和坐标。我不能把名字放在某个地方，或者如果我把名字放在里面，就把它给了所有人

markers.$("#addmarker").click(function () {

    var geojsonFeature = {

        "type": "Feature",
        "properties": {
            "name": "",
            "typ": "nur",
            "reichweite": ""
        },
        "geometry": {
            "type": "Point",
            "coordinates": [map.getCenter().lat, map.getCenter().lng]
        }
    }

    var marker;

    var geojsonlayer = L.geoJson(geojsonFeature, {

        pointToLayer: function(feature, latlng){



            marker = L.marker(map.getCenter(), {

                draggable: true,

            }).bindPopup("<div id='titel'>Unbenannter Marker</div><input type='button' value='Marker löschen' class='marker-delete-button'/><br><p>Name:<input type'text' id='setname'/><button class='trigger'>Say hi</button>");

            marker.on("popupopen", onPopupOpen);

            return marker;
        }

   layergroup.addLayer(geojsonlayer);
   layergroup.addTo(map);
   ;
});

// Function to handle delete as well as other events on marker popup open
function onPopupOpen() {

    var tempMarker = this;


    $(".marker-delete-button:visible").click(function () {
        map.removeLayer(tempMarker);

    });

function getAllMarkers() {
    var allMarkersObjArray = [];//new Array();
    var allMarkersGeoJsonArray = [];//new Array();

    $.each(map._layers, function (ml) {
        //console.log(map._layers)
        if (map._layers[ml].feature && map._layers[ml].feature.properties.typ == "nur") {

            allMarkersObjArray.push(this)
            allMarkersGeoJsonArray.push(JSON.stringify(this.toGeoJSON()))
        }
    })

    console.log(allMarkersObjArray);
    alert("Anzahl Markers : " + allMarkersGeoJsonArray.length + "\n\n" + allMarkersGeoJsonArray + "\n\n");
}

也许有人有更简单的想法。
问候！

Answer 1

如果您尝试访问通过单击 #addmarker 按钮/链接创建的所有标记，则可以直接在您的 layergroup 变量中访问它们（跳过包含每个标记的 GeoJSON 图层组）。所以如果后者不包含额外的层，你的allMarkersObjArray应该和layergroup.getLayers()有相同的内容（但不一定是相同的顺序）。

删除标记时会出现差异：因为您仅将其从地图中删除，而不是从layergroup 中删除，因此后者会将其保留在内存中。只需将其从 layergroup（而不是从地图中）删除即可解决此差异。

至于修改标记的名称（marker.feature.properties.name），您只需要一种从弹出输入中访问标记的方法。见leafletjs how to get a handle to the active pop/marker。

您还可以假设一次只有 1 个打开的弹出窗口（正常的 Leaflet 配置），并在您的 onPopupOpen 函数中保留对“活动”标记的引用。

var layergroup = L.layerGroup().addTo(map);
var activeMarker;

$("#addmarker").click(function() {

  var mapCenter = map.getCenter();

  var geojsonFeature = {
    "type": "Feature",
    "properties": {
      "name": "",
      "typ": "nur",
      "reichweite": ""
    },
    "geometry": {
      "type": "Point",
      "coordinates": [mapCenter.lat, mapCenter.lng]
    }
  };

  var geojsonlayer = L.geoJson(geojsonFeature, {

    pointToLayer: function(feature, latlng) {
      var marker = L.marker(map.getCenter(), {
        draggable: true,
      }).bindPopup("<div id='titel'>Unbenannter Marker</div><input type='button' value='Marker löschen' class='marker-delete-button'/><br><p>Name:<input type='text' id='setname'/><button class='trigger'>Say hi</button>");

      marker.on("popupopen", onPopupOpen);

      return marker;
    }
  });

  layergroup.addLayer(geojsonlayer.getLayers()[0]); // use the only marker instead of the GeoJSON layer.

});

// Function to handle delete as well as other events on marker popup open
function onPopupOpen() {

  activeMarker = this;

  $(".marker-delete-button:visible").click(function() {
    layergroup.removeLayer(activeMarker); // Remove from layergroup instead of from map. It will be removed from map automatically.
    activeMarker = null;
  });

  $("#setname").val(activeMarker.feature.properties.name).change(modifyName);
  // val will update the displayed name in the input. May need some sanitization.
  // change will add a listener callback to update the name in memory on user input.
}

function modifyName(event) {
  var newName = event.currentTarget.value;

  activeMarker.feature.properties.name = newName;
}

function getAllMarkers() {

  var allMarkersObjArray = layergroup.getLayers();
  var allMarkersGeoJsonArray = [];

  layergroup.eachLayer(function(layer) {
    allMarkersGeoJsonArray.push(JSON.stringify(layer.toGeoJSON()));
    // You could also have used layergroup.toGeoJSON(), but it would have given a FeatureCollection, whereas here you get an array of Feature's.
  });

  console.log(allMarkersObjArray);
  alert("Anzahl Markers : " + allMarkersGeoJsonArray.length + "\n\n" + allMarkersGeoJsonArray + "\n\n");
}

演示：http://jsfiddle.net/ve2huzxw/106/

在您分享的情况下，无需创建 geojsonFeature 来创建标记，但您可能出于此问题范围之外的其他原因选择了此选项。

在正常的 Leaflet 配置中，一次打开的弹出窗口不超过 1 个，因此 id='titel'（拼写错误？）和 id='setname' 一次只出现一次，但您应该避免冒险出现多个具有相同 ID 的元素。如果出于某种原因它们同时出现在页面上，则在尝试选择其中一个时会得到意想不到的结果。

注意：您的弹出内容 HTML 中有一个错字：<input type'text' id='setname'/> 应该是 <input type='text' id='setname'/>。