Получите несколько маркеров в листовке

Я ищу добавить перетаскиваемые маркеры на карту, дать им имена, а затем вернуть все маркеры с именами и координатами. Я не могу поставить имя где-нибудь, или если я вставлю имя внутри, оно даст его всем

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

Может быть, у кого-то есть более простая идея.
Приветствую!


person albert    schedule 03.01.2016    source источник


Ответы (1)


Если вы пытаетесь получить доступ ко всем маркерам, созданным нажатием кнопки/ссылки #addmarker, они будут просто доступны непосредственно в вашей переменной layergroup (пропуская группу слоев GeoJSON, которая содержит каждый из них). Поэтому, если последний не содержит дополнительного слоя, ваш allMarkersObjArray должен иметь тот же контент, что и layergroup.getLayers() ( но не обязательно в том же порядке).

Отличие появляется при удалении маркера: так как вы удаляете его только с карты, а не с layergroup, последний сохранит его в памяти. Просто удалите его из layergroup (а не с карты), чтобы устранить это несоответствие.

Что касается изменения имени вашего маркера (в marker.feature.properties.name), вам просто нужен способ доступа к маркеру из вашего всплывающего ввода. См. leafletjs, как получить дескриптор активного всплывающего окна/маркера.

Вы также можете предположить, что одновременно открывается только одно всплывающее окно (обычная конфигурация 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' появляются только один раз за раз, но вам следует избегать риска наличия нескольких элементов с одинаковым идентификатором. Если по какой-либо причине они появятся на странице одновременно, вы получите неожиданные результаты при попытке выбрать один из них.

Примечание. В HTML-содержимом вашего всплывающего окна есть опечатка: <input type'text' id='setname'/> должно быть <input type='text' id='setname'/>.

person ghybs    schedule 03.01.2016
comment
идеальный ответ. спасибо! тем временем я решил это с созданием geojson после добавления всех маркеров и повторения объектов в группе слоев, как вы сказали. Но в любом случае ваше решение помогает мне в других фактах. Спасибо!!! - person albert; 04.01.2016