Tờ rơi - Làm cách nào để tìm các điểm đánh dấu hiện có và xóa các điểm đánh dấu?

Tôi đã bắt đầu sử dụng tờ rơi làm bản đồ nguồn mở, http://leaflet.cloudmade.com/

Đoạn mã jQuery sau sẽ cho phép tạo các điểm đánh dấu trên bản đồ khi nhấp vào bản đồ:

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

Nhưng hiện tại không có cách nào để tôi (trong mã của tôi) xóa các điểm đánh dấu hiện có hoặc tìm tất cả các điểm đánh dấu mà tôi đã tạo trên bản đồ và đặt chúng vào một mảng. Bất cứ ai có thể giúp tôi hiểu làm thế nào để làm điều này? Tài liệu tờ rơi có sẵn tại đây: http://leaflet.cloudmade.com/reference.html

bạn phải đặt "điểm đánh dấu var" của bạn ra khỏi chức năng. Sau đó, bạn có thể truy cập nó:

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

sau đó sau:

map.removeLayer(marker)

Nhưng bạn chỉ có thể có điểm đánh dấu mới nhất theo cách đó, vì mỗi lần, điểm đánh dấu var bị xóa muộn nhất. Vì vậy, một cách để thực hiện là tạo một mảng toàn cầu của điểm đánh dấu và bạn thêm điểm đánh dấu của mình vào mảng toàn cầu.

Bạn cũng có thể đẩy các điểm đánh dấu vào một mảng. Xem ví dụ về mã, điều này phù hợp với tôi:

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

Đây là mã và bản trình diễn để Thêm điểm đánh dấu , xóa bất kỳ điểm đánh dấu nào và cũng nhận được tất cả các điểm đánh dấu hiện tại / đã thêm :

Đây là toàn bộ mã JSFiddle . Ngoài ra đây là trang demo đầy đủ .

Thêm điểm đánh dấu:

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

Xóa điểm đánh dấu:

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

Lấy tất cả các điểm đánh dấu trong bản đồ:

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

Đây là jsFiddle cho phép bạn tạo điểm đánh dấu bằng onMapClickphương pháp của mình , sau đó xóa chúng bằng cách nhấp vào liên kết.

Quá trình này tương tự như undefined - thêm mỗi điểm đánh dấu mới vào một markersmảng để bạn có thể truy cập một điểm đánh dấu cụ thể khi bạn muốn tương tác với nó sau này.

(1) thêm nhóm lớp và mảng để giữ các lớp và tham chiếu đến các lớp dưới dạng các biến toàn cục:

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

(2) thêm bản đồ

(3) Thêm lớp nhóm vào bản đồ

map.addLayer (search_group);

(4) chức năng thêm vào bản đồ, với một cửa sổ bật lên chứa liên kết, khi nhấp vào sẽ có tùy chọn xóa. Liên kết này sẽ có, như id của nó là độ dài vĩ độ của điểm. Sau đó, id này sẽ được so sánh với khi bạn nhấp vào một trong các điểm đánh dấu đã tạo của mình và bạn muốn xóa nó.

 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) Hàm remove, so sánh độ dài của điểm đánh dấu với id được kích hoạt trong 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);
            }

    }

    }  

Khi bạn lưu sự tôn kính vào điểm đánh dấu trong chức năng thêm, điểm đánh dấu có thể tự xóa nó. Không cần mảng.

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

Bạn đã thử layerGroupchưa?

Tài liệu tại đây https://leafletjs.com/reference-1.2.0.html#layergroup

Chỉ cần tạo một lớp, thêm tất cả điểm đánh dấu vào lớp này, sau đó bạn có thể tìm và phá hủy điểm đánh dấu một cách dễ dàng.

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

Trong trường hợp của tôi, tôi có nhiều nhóm lớp khác nhau để người dùng có thể hiển thị / ẩn các cụm đánh dấu loại thích. Tuy nhiên, trong mọi trường hợp, bạn xóa một điểm đánh dấu riêng lẻ bằng cách lặp qua các nhóm lớp của bạn để tìm và xóa nó. Trong khi lặp lại, hãy tìm kiếm một điểm đánh dấu có thuộc tính tùy chỉnh, trong trường hợp của tôi là 'khóa', được thêm vào khi điểm đánh dấu được thêm vào nhóm lớp. Thêm 'khóa' của bạn giống như thêm thuộc tính tiêu đề. Sau đó, điều này nhận được một tùy chọn lớp. Khi bạn tìm thấy kết quả phù hợp đó, bạn .removeLayer () và nó sẽ loại bỏ điểm đánh dấu cụ thể đó. Hy vọng điều đó giúp được bạn!

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

Có thể tôi đã quá muộn cho việc này nhưng tôi vẫn tạo ra một dự án phù thủy mở để làm điều tương tự cùng với một số việc khác

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

vui lòng kiểm tra và đánh dấu sao nếu bạn thích :)