cuando busco una ciudad en la barra de búsqueda que otra ciudad, muestra un marcador y un círculo tanto en la ubicación de la ciudad anterior como en la actual. si ves la imagen, te dirá lo que estoy diciendo. ayúdame a mejorar el código.
<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); }); });Debería borrar la capa anterior de la instancia del mapa. Puede intentar crear un grupo de capas y agregar la capa o eliminarla de ese ( 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); }); });Debe almacenar el marcador en una variable como:
var marker = L.marker(latlng).addTo(map) y luego podrá mover el marcador con: marker.setLatLng(latlng);