在使用 HTML 和 JavaScript 代碼在 Leaflet 中添加新標記之前刪除以前的標記

Question

我正在嘗試開發位置庫 web 應用程序，在添加新標記之前，我遇到了刪除先前標記的問題。 我使用 onchange() 作為下拉列表來添加新標記。 每當發生 onchange() 時，我想刪除以前的標記並添加新標記。

起初，當您選擇一個選項時，它會刪除標記並添加新標記，但是當您第二次選擇一個選項時，它只是添加一個標記並沒有刪除以前的標記。

這是我在 HTML 中的代碼：

// dropdown list
<select id='city' onchange='select()'>
    <option value='0'>Display by City</option>
</select>

我在 Javascript 中的代碼：

var places = [
    ['Matandang Balara','Quezon City',14.6656,121.0822],
    ['Diliman','Quezon City', 14.6462, 121.0528],
    ['Batasan Hills','Quezon City', 14.6816, 121.0966],
    ['Fairview','Quezon City', 14.7022, 121.0682],
    ['San Mateo','Rizal', 14.6898, 121.1220],
    ['Antipolo','Rizal',14.6255,121.1245],
    ['Binangonan','Rizal', 14.4765, 121.1957]
]

// map
var map = L.map('map').setView([14.5995, 120.9842], 11)
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: "&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a>",
    maxZoom: 18,
    minZoom: 6
}).addTo(map)

var s = document.getElementById('city') // get dropdown list
var text, value, data
var markerLayer = new L.LayerGroup()

// add marker
for (var i = 0; i < places.length; i++) {
    // Set value for option
    value = places[i][1]
    text = places[i][1] // Set option text

    data = {text, value} // Option array

    s.add(new Option(data.text, data.value)) // Display option details

    removeOption(s) // function that remove the duplicate option

    // Map marker popup
    var pop = L.popup().setContent('<b>Brgy:</b> ' + places[i][0] + '<br><b>City:</b> ' + places[i][1])

    // Set map marker
    marker = new L.marker([places[i][2], places[i][3]])
        .bindPopup(pop).openPopup()

    markerLayer.addLayer(marker)
    map.addLayer(markerLayer)
}

選擇選項的代碼 - 刪除並添加新標記：

// for remove and add new marker
function select() {
    var selected = s.options[s.selectedIndex]
    var txt = selected.text // get option text

    // to remove the marker
    markerLayer.removeLayer(marker)
    map.removeLayer(markerLayer)

    for (var i = 0; i < places.length; i++) {
    if(txt == places[i][1]) { // Display marker depends on option text
        var pop = L.popup().setContent('<b>Brgy:</b> ' + places[i][0] + '<br><b>City:</b> ' + places[i][1])

        marker = new L.marker([places[i][2], places[i][3]])
            .bindPopup(pop).openPopup()

        map.addLayer(marker)
        }
    }
}

謝謝！

Answer 1

您只需要在初始化和 onchange 偵聽器之間保持一致：

• 在初始化期間，您將 Leaflet 標記分配到您的marker變量中，您將其添加到您的markerLayer圖層組中，然后您將其添加到您的 map。
• 在 onchange 監聽器中，您正確地從 markerLayer 中刪除了marker ，甚至從markerLayer中刪除了后者（這應該是不必要的）。 然后你將一個新的 Marker 重新分配到marker中，但直接將其添加到 map，而不是像初始化期間那樣添加到你的markerLayer中。

一個簡單的解決方案就是讓你的markerLayer Layer Group 總是在 map 上，在你的 onchange 監聽器的開頭清除它，然后填充它：

// for remove and add new marker
function select() {
    var selected = s.options[s.selectedIndex]
    var txt = selected.text // get option text

    // to remove the marker
    //markerLayer.removeLayer(marker)
    //map.removeLayer(markerLayer)
    markerLayer.clearLayers(); // Blindly remove everything from the Layer Group

    for (var i = 0; i < places.length; i++) {
    if(txt == places[i][1]) { // Display marker depends on option text
        var pop = L.popup().setContent('<b>Brgy:</b> ' + places[i][0] + '<br><b>City:</b> ' + places[i][1])

        marker = new L.marker([places[i][2], places[i][3]])
            .bindPopup(pop).openPopup()

        //map.addLayer(marker)
        marker.addTo(markerLayer); // Add to the Layer Group to keep consistent behaviour
        }
    }
}