当我搜索另一个城市时，传单 js 地图不更新标记和圆点不知道代码有什么问题？见图片

Question

当我在搜索栏中搜索城市而不是另一个城市时，它会在之前的城市和当前城市的位置上显示标记和圆圈，就像这样。如果你看到图片，它会告诉你我在说什么。帮我改进一下代码。

See problem

<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

您需要从地图实例中清除上一层。您可以尝试创建一个图层组并从中添加图层 to/remove (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);

当我搜索另一个城市时，传单 js 地图不更新标记和圆点不知道代码有什么问题？见图片

leaflet js map not updating marker and circle point when i search some another city dont know what is problem in code? See picture

html

javascript

api

location