Листовка-как найти существующие маркеры и удалить маркеры?
Я начал использовать листовку в качестве карты с открытым исходным кодом,http://leaflet.cloudmade.com/
следующий код jQuery позволит создавать маркеры на карте по клику на карте:
map.on('click', onMapClick);
function onMapClick(e) {
var marker = new L.Marker(e.latlng, {draggable:true});
map.addLayer(marker);
marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
};
но в настоящее время у меня нет возможности (в моем коде) удалить существующие маркеры или найти все маркеры, которые я создал на карте, и поместить их в массив. Может кто поможет мне понять, как это сделать? Документация листовки доступна здесь : http://leaflet.cloudmade.com/reference.html
8 ответов:
вы должны поставить свой "var маркер" из функции. Затем позже вы можете получить к нему доступ:
позже :var marker; function onMapClick(e) { marker = new L.Marker(e.latlng, {draggable:true}); map.addLayer(marker); marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup(); };
map.removeLayer(marker)
но у вас может быть только последний маркер, потому что каждый раз маркер var стирается последним. Поэтому один из способов - создать глобальный массив маркеров, и вы добавляете свой маркер в глобальный массив.
вы также можете вставлять маркеры в массив. См. пример кода, это работает для меня:
/*create array:*/ var marker = new Array(); /*Some Coordinates (here simulating somehow json string)*/ var items = [{"lat":"51.000","lon":"13.000"},{"lat":"52.000","lon":"13.010"},{"lat":"52.000","lon":"13.020"}]; /*pushing items into array each by each and then add markers*/ function itemWrap() { for(i=0;i<items.length;i++){ var LamMarker = new L.marker([items[i].lat, items[i].lon]); marker.push(LamMarker); map.addLayer(marker[i]); } } /*Going through these marker-items again removing them*/ function markerDelAgain() { for(i=0;i<marker.length;i++) { map.removeLayer(marker[i]); } }
вот код и демо-версию для добавить маркер,удаление маркера и получение всех настоящих / добавленных маркеров:
вот это все код JSFiddle . Также здесь находится полная демо-страницы.
добавить маркер :
// Script for adding marker on map click map.on('click', onMapClick); function onMapClick(e) { var geojsonFeature = { "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [e.latlng.lat, e.latlng.lng] } } var marker; L.geoJson(geojsonFeature, { pointToLayer: function(feature, latlng){ marker = L.marker(e.latlng, { title: "Resource Location", alt: "Resource Location", riseOnHover: true, draggable: true, }).bindPopup("<input type='button' value='Delete this marker' class='marker-delete-button'/>"); marker.on("popupopen", onPopupOpen); return marker; } }).addTo(map); }
удаление маркера :
// Function to handle delete as well as other events on marker popup open function onPopupOpen() { var tempMarker = this; // To remove marker on click of delete button in the popup of marker $(".marker-delete-button:visible").click(function () { map.removeLayer(tempMarker); }); }
получение всех маркеров на карте :
// getting all the markers at once function getAllMarkers() { var allMarkersObjArray = []; // for marker objects var allMarkersGeoJsonArray = []; // for readable geoJson markers $.each(map._layers, function (ml) { if (map._layers[ml].feature) { allMarkersObjArray.push(this) allMarkersGeoJsonArray.push(JSON.stringify(this.toGeoJSON())) } }) console.log(allMarkersObjArray); } // any html element such as button, div to call the function() $(".get-markers").on("click", getAllMarkers);
здесь jsFiddle это позволяет создавать маркеры с помощью вашего
onMapClick
метод, а затем удалите их, нажав на ссылку.процесс похож на undefined - добавить каждый новый маркер в
markers
массив, так что вы можете получить доступ к специфическим маркером, когда вы хотите взаимодействовать с ним позже.
(1) Добавить группу слоев и массив для хранения слоев и ссылки на слои в качестве глобальных переменных:
var search_group = new L. LayerGroup(); var clickArr = новый массив ();
(2) Добавить карту
(3) добавить слой к карте
карта.addLayer (search_group);
(4) добавить функцию map, с всплывающее окно, которое содержит ссылку, которая при нажатии будет удалить. Эта ссылка будет иметь в качестве своего идентификатора lat long точки. Этот идентификатор затем будет сравниваться с тем, когда вы нажмете на один из созданных маркеров, и вы хотите удалить его.
map.on('click', function(e) { var clickPositionMarker = L.marker([e.latlng.lat,e.latlng.lng],{icon: idMarker}); clickArr.push(clickPositionMarker); mapLat = e.latlng.lat; mapLon = e.latlng.lng; clickPositionMarker.addTo(search_group).bindPopup("<a name='removeClickM' id="+e.latlng.lat+"_"+e.latlng.lng+">Remove Me</a>") .openPopup(); /* clickPositionMarker.on('click', function(e) { markerDelAgain(); }); */ });
(5) функция remove, сравните маркер lat long с идентификатором, запущенным в remove:
$(document).on("click","a[name='removeClickM']", function (e) { // Stop form from submitting normally e.preventDefault(); for(i=0;i<clickArr.length;i++) { if(search_group.hasLayer(clickArr[i])) { if(clickArr[i]._latlng.lat+"_"+clickArr[i]._latlng.lng==$(this).attr('id')) { hideLayer(search_group,clickArr[i]); clickArr.splice(clickArr.indexOf(clickArr[i]), 1); } } }
при сохранении почтения к маркеру в функции добавления маркер может удалить его самостоятельно. Нет необходимости в массивах.
function addPump(){ var pump = L.marker(cords,{icon: truckPump}).addTo(map).bindPopup($('<a href="#" class="speciallink">Remove ME</a>').click(function() { map.removeLayer(pump); })[0]); }
в моем случае у меня есть различные группы слоев, чтобы пользователи могли показывать/скрывать кластеры подобных маркеров типа. Но в любом случае вы удаляете отдельный маркер, перебирая группы слоев, чтобы найти и удалить его. Во время цикла найдите маркер с пользовательским атрибутом, в моем случае "ключ", добавленный при добавлении маркера в группу слоев. Добавьте свой "ключ" так же, как добавление атрибута заголовка. Позже это получил вариант слоя. Когда вы найдете это совпадение, вы .removeLayer() и его избавляется от этого конкретного маркера. Надеюсь, что это поможет вам!
eventsLayerGroup.addLayer(L.marker([tag.latitude, tag.longitude],{title:tag.title, layer:tag.layer, timestamp:tag.timestamp, key:tag.key, bounceOnAdd: true, icon: L.AwesomeMarkers.icon({icon: 'vignette', markerColor: 'blue', prefix: '', iconColor: 'white'}) }).bindPopup(customPopup(tag),customOptions).on('click', markerClick)); function removeMarker(id){ var layerGroupsArray = [eventsLayerGroup,landmarksLayerGroup,travelerLayerGroup,marketplaceLayerGroup,myLayerGroup]; $.each(layerGroupsArray, function (key, value) { value.eachLayer(function (layer) { if(typeof value !== "undefined"){ if (layer.options.layer){ console.log(layer.options.key); console.log(id); if (id === layer.options.key){ value.removeLayer(layer); } } } }); }); }
ты пробовал
layerGroup
еще?документы здесь https://leafletjs.com/reference-1.2.0.html#layergroup
просто создайте слой, добавьте все маркеры в этот слой, затем вы можете легко найти и уничтожить маркер.
var markers = L.layerGroup() const marker = L.marker([], {}) markers.addLayer(marker)