리플릿 - 기존 마커를 찾고 마커를 삭제하는 방법은 무엇입니까?

리플릿 - 기존 마커를 찾고 마커를 삭제하는 방법은 무엇입니까?

저는 전단지를 오픈 소스 맵인 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 marker"를 기능 밖으로 내보내야 합니다.나중에 액세스할 수 있습니다.

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)

하지만 최신 마커만 사용할 수 있습니다. 매번 최신 마커가 삭제되기 때문입니다.한 가지 방법은 전역 마커 배열을 만들고 전역 마커 배열에 마커를 추가하는 것입니다.

마커를 배열에 밀어넣을 수도 있습니다.코드 예제를 참조하십시오. 이 작업은 다음과 같습니다.

/*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배열을 사용하면 나중에 특정 마커와 상호 작용할 때 특정 마커에 액세스할 수 있습니다.

도면층을 보유하고 도면층을 글로벌 변수로 참조할 도면층 그룹 및 배열 추가:

var search_group = 새 L.계층 그룹(), varclickArr = newArray()

지도 추가

매핑에 그룹 도면층 추가

map.addLayer(search_group);

링크가 포함된 팝업과 함께 지도에 추가 기능을 사용할 수 있습니다. 이 기능을 클릭하면 제거 옵션이 표시됩니다.이 링크는 포인트의 마지막 부분에서 언급했듯이 다음과 같습니다.그러면 이 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(); 
                }); */


});

제거 기능은 마커를 제거할 때 발생한 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);
            }

    }

    }  

도면층 그룹에 마커를 추가하면 다음을 적용할 수 있습니다.removeLayer.

var marker;
function newMarker() {
 markerLayer = L.layerGroup();
 marker = new L.marker( [12, 13],
 {icon:greenMarker, clickable:true}).bindPopup("Hello Marker").addTo(markerLayer); 

markerLayer.removeLayer(marker);
};

추가 기능에서 마커에 경사진 부분을 저장하면 마커 자체를 제거할 수 있습니다.어레이가 필요하지 않습니다.

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)

L을 사용하는 경우.배열에 마커를 저장하는 것을 포함하는 Routing.control 응답은 작동하지 않습니다.그들은 나를 위해 일하지 않았습니다.저는 L을 찾았습니다.Routing.control은 마커를 자동으로 추가하고 L을 제거하여 마커를 제거합니다.Routing.control:

this.map.removeControl(this.routingControl)

경로가 제거되고 첫 번째 경로를 제외한 모든 웨이포인트/마커가 제거되었으며, 레이어를 콘솔에 기록했을 때 웨이포인트가 있는 레이어가 여전히 남아 있었습니다. 이유가 궁금합니다.

이 솔루션은 마침내 저에게 효과가 있었습니다.

this.map.eachLayer((layer: any) => {
  if (layer.options.waypoints && layer.options.waypoints.length) {
    this.map.removeLayer(layer);
   }
});

저의 경우 사용자가 유사한 유형의 마커의 클러스터를 표시/숨길 수 있도록 다양한 레이어 그룹이 있습니다.그러나 어떤 경우에도 도면층 그룹을 루프하여 개별 마커를 찾아 삭제합니다.루프하는 동안 사용자 지정 특성(내 경우에는 마커가 도면층 그룹에 추가되었을 때 추가된 '키')을 가진 마커를 검색합니다.제목 속성을 추가하는 것처럼 '키'를 추가합니다.나중에 계층 옵션이 제공됩니다.일치하는 항목을 찾으면 .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);
                    }
                }
            }
        });
    });
}

마커를 제거하기 위해 수행한 작업은 이 작업을 허용하는 단추를 만드는 것입니다.

제가 누군가를 도울 수 있기를 바랍니다 :)

//Button who active deleteBool
const button = document.getElementById('btn')

//Boolean who let me delete marker
let deleteBool = false

//Button function to enable boolean
button.addEventListener('click',()=>{
  deleteBool = true
})

// Function to delete marker 
const deleteMarker = (e) => {
    if (deleteBool) {
        e.target.removeFrom(map)
        deleteBooly = false
    }
}

//Initiate map
var map = L.map('map').setView([51.505, -0.09], 13);

//Create one marker
let marker = L.marker([51.5, -0.09]).addTo(map)
//Add Marker Function
marker.on('click', deleteMarker)

body {
  display: flex;
  flex-direction: column;
}

#map{
  width: 500px;
  height: 500px;
  margin: auto;
}

#btn{
  width: 50px;
  height: 50px;
  margin: 2em auto; 
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <title>MovieCenter</title>
</head>

<body>
    <div id="map"></div>
    <button id="btn">Click me!</button>
    <script script="script" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
    <script src="script.js"></script>
</body>

</html>

언급URL : https://stackoverflow.com/questions/9912145/leaflet-how-to-find-existing-markers-and-delete-markers