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

102

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

jay
sumber
3
Cara terbaik adalah membuat layergroup. Kemudian kita bisa menambahkan marker ke layergroup. Layergroup memungkinkan untuk mengontrol semua penanda sekaligus.
neogeomat
1
Grup Lapisan jelas merupakan cara terbersih untuk menangani ini. Dokumen di sini: leafletjs.com/reference.html#layergroup
Zar Shardan

Jawaban:

152

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.

Laurent Debricon
sumber
20
Harus menjadi cara untuk mengumpulkan semua lapisan yang digunakan oleh Leaflet. : /
jackyalcine
10
Lapisan disimpan secara internal map._layers.
flup
11
@jackyalcine: Lihat LayerGroup dan FeatureGroup
Michael Wales
54

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]);
    }  
}
tidak terdefinisi
sumber
32

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);
Kedar.Aitawdekar
sumber
1
Untuk mendapatkan semua penanda, map._layers[ml].featuretidak berfungsi lagi.
Samuel Méndez
15

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.

Brett DeWoody
sumber
1
Bagus! Hanya satu pertanyaan, Array markers () masih menyimpan yang dihapus, Bagaimana Anda juga menghapus penanda dari array? Terima kasih!
Miguel Stevens
Anda bisa menggunakan deleteuntuk menghapus item tersebut. Misalnya delete markers[$(this).attr('id')];.
Brett DeWoody
API buatan awan yang disertakan untuk ubin dalam contoh ini tampaknya tidak aktif sekarang. Ini adalah fork yang sama persis, tetapi menggunakan server petak mapquest alih-alih cloudmade, jadi tidak diperlukan kunci API. jsfiddle.net/nqDKU
FoamyGuy
7

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

    }

    }  
droid-zilla.dll
sumber
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]);
        }
F6F
sumber
1

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)
Son Tr.
sumber
0

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);
                    }
                }
            }
        });
    });
}
Ronnie Royston
sumber
0

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 :)

Kishan Oza
sumber