leaflet js 地图在地图上搜索时不更新标记和圆圈指向新位置

Question

在默认位置，它显示标记和圆点，但当我搜索新位置时，它不会更新位置、标记和圆点。它应该将位置、标记和圆圈更新到新搜索的位置，例如如果搜索“伦敦”，它应该更新之前的位置，标记和圆圈也应该出现在伦敦的位置。

查看问题

<div class="container-fluid d-flex flex-column align-items-center area">
        <div class="search-area">
            <input type="text" placeholder="City" id="search">
            <button id="clickme" type="button">Search</button>
        </div>

    <div id="map"></div>
</div>



clickme.addEventListener("click",my=(e)=>{
          e.preventDefault();
          var city=search.value;
          fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=ac3673a8887645fc3d0493904a348e03`)
          .then(response=> response.json())
          .then(data=>{
              var lat=data.coord.lat;
              var long=data.coord.lon;
              var udata=data.name;
              var latlng = L.latLng(lat, long);    
              map.panTo([lat,long],13);
              var circle = L.circle([lat, long], {
                color: 'red',
                fillColor: '#f03',
                fillOpacity: 0.5,
                radius: 1000
            }).addTo(map);
            var marker= L.marker(latlng).addTo(map)
              var popup = L.popup()
              .setLatLng(latlng)
              .setContent(udata)
              .openOn(map);
               console.log(data.name);
              
              });
          });

Answer 1

您需要从地图实例中清除前一层。您可以尝试创建一个图层组并将图层添加到该图层组或从中删除该图层（DOCS）：

// Create a layer group
const layerGroup = L.layerGroup().addTo(map)

clickme.addEventListener("click",my=(e)=>{
          e.preventDefault();
          var city=search.value;
          fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=ac3673a8887645fc3d0493904a348e03`)
          .then(response=> response.json())
          .then(data=>{
  
              // Clear the layer group
              layerGroup.clearLayers()
    
              var lat=data.coord.lat;
              var long=data.coord.lon;
              var udata=data.name;
              var latlng = L.latLng(lat, long);    
              map.panTo([lat,long],13);
              var circle = L.circle([lat, long], {
                color: 'red',
                fillColor: '#f03',
                fillOpacity: 0.5,
                radius: 1000
            }).addTo(layerGroup); // Add to layerGroup instead of map

            // Add marker to layerGroup instead of map
            var marker= L.marker(latlng).addTo(layerGroup)
              var popup = L.popup()
              .setLatLng(latlng)
              .setContent(udata)
              .openOn(map);
               console.log(data.name);
              
              });
          });

Answer 2

您应该将标记存储在变量中，例如：

var marker = L.marker(latlng).addTo(map)

然后您将能够通过以下方式移动标记：

marker.setLatLng(latlng);