在使用HTML和JavaScript代码在传单中添加新标记之前，请删除以前的标记

我正在尝试开发基于位置的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)
}

var位置=[
['Matandang Balara'，'Quezon City'，14.6656121.0822]，
['Diliman'，'Quezon City'，14.6462121.0528]，
[Batasan Hills'，'Quezon City'，14.6816121.0966]，
['Fairview'，'Quezon City'，14.7022，121.0682]，
[San Mateo'，Rizal'，14.6898,121.1220]，
[Antipolo'，Rizal'，14.6255121.1245]，
['Binangonan'，'Rizal'，14.4765121.1957]
]
//地图
var map=L.map（'map'）.setView（[14.5995120.9842]，11）
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；”，
maxZoom:18，
最小缩放：6
}).addTo（地图）
var s=document.getElementById（'city'）//获取下拉列表
变量文本、值、数据
var markerLayer=新的L.LayerGroup（）
//添加标记
对于（变量i=0；i城市：'+places[i][1]）
//设置地图标记
标记=新的L.标记（[places[i][2]，places[i][3]））
.bindPopup（pop）.openPopup（）
markerLayer.addLayer（标记器）
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)
        }
    }
}

//用于删除和添加新标记
函数选择（）{
var selected=s.options[s.selectedIndex]
var txt=selected.text//获取选项文本
//移除标记
markerLayer.RemovelLayer（标记器）
地图移除层（markerLayer）
对于（变量i=0；i城市：'+places[i][1]）
标记=新的L.标记（[places[i][2]，places[i][3]））
.bindPopup（pop）.openPopup（）
map.addLayer（标记器）
}
}
}

---

谢谢大家!

您只需要在初始化和onchange侦听器之间保持一致：

• 在初始化过程中，将传单标记指定到

  Marker

  变量中，然后将该变量添加到

  markerLayer

  图层组中，然后再将该图层组添加到地图中
• 在onchange listener中，您可以从

  markerLayer

  中正确地删除

  marker

  ，甚至可以从地图中删除后者（这应该是不必要的）。然后将新标记重新分配到

  标记

  ，但直接将其添加到地图中，而不是像初始化时那样添加到

  标记层

一个简单的解决方案是将

markerLayer

图层组始终保留在地图上，在onchange侦听器的开头清除它，然后填充它：

//用于删除和添加新标记
函数选择（）{
var selected=s.options[s.selectedIndex]
var txt=selected.text//获取选项文本
//移除标记
//markerLayer.RemovelLayer（标记器）
//地图移除层（markerLayer）
markerLayer.clearLayers（）；//盲目地从图层组中删除所有内容
对于（变量i=0；i城市：'+places[i][1]）
标记=新的L.标记（[places[i][2]，places[i][3]））
.bindPopup（pop）.openPopup（）
//map.addLayer（标记器）
marker.addTo（markerLayer）；//添加到图层组以保持一致的行为
}
}
}