在传单中获取多个标记

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 按钮/link 创建的所有标记，可以直接在 layergroup 变量中直接访问它们（跳过 GeoJSON 层持有他们每个人的小组）。因此，如果后者不包含额外层，则您的 allMarkersObjArray 应该具有与 layergroup.getLayers() 相同的内容（但不一定按相同的顺序）。

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

至于修改标记的名称（在 marker.feature.properties.name 中），您只需要一种从弹出输入中访问标记的方法。参见。

你也可以假设一次只有 1 个打开的弹出窗口（正常的 Leaflet 配置），并在你的 onPopupOpen 函数中保留对 "active" 标记的引用。

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 的风险。如果由于某种原因它们同时出现在页面上，您在尝试 select 一个时会得到意想不到的结果。

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

在传单中获取多个标记

Get multiple Markers in Leaflet

html

javascript

markers

leaflet