전단지-기존 마커를 찾고 마커를 삭제하는 방법은 무엇입니까?

저는 리플렛을 오픈 소스 맵으로 사용하기 시작했습니다. 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에서 볼 수 있습니다.

함수에서 "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.

프로세스는 정의되지 않은 것과 유사합니다 markers. 나중에 상호 작용하고 싶을 때 특정 마커에 액세스 할 수 있도록 각각의 새 마커를 배열에 추가합니다 .

(1) 레이어 그룹 및 배열을 추가하여 레이어 및 레이어 참조를 전역 변수로 유지합니다.

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

(2)지도 추가

(3)지도에 그룹 레이어 추가

map.addLayer (search_group);

(4) 클릭하면 제거 옵션이있는 링크가 포함 된 팝업이있는지도에 추가 기능. 이 링크는 ID로 포인트의 위도를 갖습니다. 이 ID는 생성 된 마커 중 하나를 클릭하고 삭제할 때와 비교됩니다.

 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) 제거 기능, lat long 마커를 제거에서 실행 된 ID와 비교합니다.

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

layerGroup아직 해보 셨나요?

여기 문서 https://leafletjs.com/reference-1.2.0.html#layergroup

레이어를 만들고 모든 마커를이 레이어에 추가하기 만하면 마커를 쉽게 찾고 파괴 할 수 있습니다.

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

제 경우에는 사용자가 유사한 유형 마커의 클러스터를 표시하거나 숨길 수 있도록 다양한 레이어 그룹이 있습니다. 그러나 어쨌든 레이어 그룹을 반복하여 찾아서 삭제함으로써 개별 마커를 삭제합니다. 루핑하는 동안 마커가 레이어 그룹에 추가 될 때 추가 된 사용자 지정 속성 (내 경우에는 '키')이있는 마커를 검색합니다. 제목 속성을 추가하는 것처럼 '키'를 추가하십시오. 나중에 이것은 레이어 옵션을 얻었습니다. 일치하는 항목을 찾으면 .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);
                    }
                }
            }
        });
    });
}

내가 너무 늦었을 수도 있지만 여전히 다른 일과 함께 동일한 작업을 수행하기 위해 하나의 공개 소스 프로젝트를 만들었습니다.

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

체크 아웃하고 원하는 경우 별표를 작성하십시오 :)