Leaflet - Bagaimana menemukan penanda yang ada, dan menghapus penanda?

Saya sudah mulai menggunakan leaflet sebagai peta open source, http://leaflet.cloudmade.com/

Kode jQuery berikut akan memungkinkan pembuatan penanda pada peta di klik peta:

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

Tetapi saat ini tidak ada cara bagi saya (dalam kode saya) untuk menghapus penanda yang ada, atau menemukan semua penanda yang telah saya buat di peta dan memasukkannya ke dalam array. Adakah yang bisa membantu saya memahami bagaimana melakukan ini? Dokumentasi leaflet tersedia di sini: http://leaflet.cloudmade.com/reference.html

Anda harus mengeluarkan "var marker" dari fungsi tersebut. Kemudian nanti Anda dapat mengaksesnya:

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

lalu nanti:

map.removeLayer(marker)

Tetapi Anda hanya dapat memiliki penanda terbaru dengan cara itu, karena setiap kali, penanda var dihapus oleh yang terbaru. Jadi salah satu cara untuk melakukannya adalah membuat larik global marker, dan Anda menambahkan marker di larik global.

Anda juga dapat mendorong penanda ke dalam larik. Lihat contoh kode, ini berfungsi untuk saya:

/*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]);
    }  
}

Berikut adalah kode dan demo untuk Menambahkan penanda , menghapus salah satu penanda dan juga mendapatkan semua penanda yang ada / ditambahkan :

Ini seluruh kode JSFiddle . Juga di sini adalah demo satu halaman penuh .

Menambahkan penanda:

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

Menghapus Marker:

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

Mendapatkan semua penanda di peta:

// 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);

Berikut adalah jsFiddle yang memungkinkan Anda membuat marker menggunakan onMapClickmetode Anda , lalu menghapusnya dengan mengklik link.

Prosesnya mirip dengan undefined - tambahkan setiap penanda baru ke markerslarik sehingga Anda dapat mengakses penanda tertentu saat Anda ingin berinteraksi dengannya nanti.

(1) tambahkan grup lapisan dan larik untuk menampung lapisan dan referensi ke lapisan sebagai variabel global:

var search_group = new L.LayerGroup (); var clickArr = new Array ();

(2) tambahkan peta

(3) Tambahkan layer grup ke peta

map.addLayer (grup_penelusuran);

(4) fungsi tambahkan ke peta, dengan popup yang berisi tautan, yang ketika diklik akan memiliki opsi hapus. Tautan ini akan memiliki, sebagai id, panjang lintang dari titik tersebut. Id ini kemudian akan dibandingkan dengan ketika Anda mengklik salah satu penanda yang Anda buat dan Anda ingin menghapusnya.

 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) Fungsi remove, bandingkan marker lat long dengan id yang diaktifkan di 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);
            }

    }

    }  

Saat Anda menyimpan penghormatan ke penanda dalam fungsi penambahan, penanda dapat menghapusnya sendiri. Tidak perlu array.

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

Apakah Anda mencoba layerGroupbelum?

Dokumen di sini https://leafletjs.com/reference-1.2.0.html#layergroup

Cukup buat satu lapisan, tambahkan semua penanda ke lapisan ini, lalu Anda dapat menemukan dan menghancurkan penanda dengan mudah.

var markers = L.layerGroup()
const marker = L.marker([], {})
markers.addLayer(marker)

Dalam kasus saya, saya memiliki berbagai kelompok lapisan sehingga pengguna dapat menampilkan / menyembunyikan kelompok penanda tipe serupa. Namun, bagaimanapun juga, Anda menghapus satu penanda dengan mengulang grup lapisan Anda untuk menemukan dan menghapusnya. Saat melakukan perulangan, cari penanda dengan atribut khusus, dalam kasus saya 'kunci', ditambahkan ketika penanda ditambahkan ke grup lapisan. Tambahkan 'kunci' Anda seperti menambahkan atribut judul. Nanti ini mendapatkan opsi lapisan. Ketika Anda menemukan kecocokan itu, Anda .removeLayer () dan itu menghilangkan penanda khusus itu. Semoga itu bisa membantu Anda!

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

Mungkin saya terlambat untuk ini, tetapi saya masih telah membuat satu proyek sorce terbuka untuk melakukan hal yang sama bersama dengan beberapa hal lainnya

https://github.com/ikishanoza/ionic-leaflet

silakan checkout dan beri bintang jika Anda suka :)