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。

您还可以假设一次只打开一个弹出框（正常的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的多个元素的风险。如果由于任何原因它们同时出现在页面上，则在尝试选择一个页面时会出现意外结果。

注意：您的弹出式内容HTML中存在拼写错误：<input type'text' id='setname'/>应为<input type='text' id='setname'/>。

在Leaflet中获取多个标记

1 个答案: