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

Program / 글쓴이

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