Javascript 如何向图层添加标记并使用传单显示标记

我想从.json创建多个标记，从.json绑定弹出窗口中指定纬度和经度，该弹出窗口显示纬度和经度并实时显示它们，我遇到的问题是将标记添加到图层并在地图上显示

<script>
        //Creat maps and tiles
        const mymap = L.map('Mapa').setView([0, 0], 5);
        const attribution =
            '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
        
        const tileUrl= 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
        const tiles=L.tileLayer(tileUrl,{attribution});
        tiles.addTo(mymap);
        
        //Layer
        var markers = L.LayerGroup([])

        //Icono Custom
        const Icono= L.icon({
            iconUrl: 'punto.png',
            iconSize: [32,32],
            iconAnchor: [16,16]
        });
        //Marker
        const marker = L.marker([0,0],{icon:Icono});
        //API
        const api_url= 'https://api.wheretheiss.at/v1/satellites/25544'
        //Function to get data from api
        async function getShip() {
            const response = await fetch(api_url);
            const data = await response.json();
            const { latitude, longitude} = data;                
            marker.setLatLng([latitude, longitude])
            marker.bindPopup("Latitud\xa0\xa0\xa0\xa0\xa0:\xa0\xa0"+longitude+"<br>Longitude:\xa0\xa0"+latitude);
            document.getElementById('lat').textContent= latitude;
            document.getElementById('lon').textContent= longitude;
            markers.addLayer(marker)
        }
    
        getShip();

        L.control.layers(markers).addTo(mymap)


        setInterval(getShip;, 1000);


    </script>

//创建地图和瓷砖
const mymap=L.map（'Mapa'）.setView（[0,0]，5）；
常量属性=
“&复制；贡献者；
const tileUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'；
const tiles=L.tileLayer（tileUrl，{attribute}）；
tiles.addTo（mymap）；
//层
var markers=L.LayerGroup（[]）
//Icono海关
常数Icono=L.icon({
iconUrl:'punto.png'，
iconSize:[32,32]，
iconAnchor:[16,16]
});
//标记
const marker=L.marker（[0,0]，{icon:Icono}）；
//原料药
const api_url='1〕https://api.wheretheiss.at/v1/satellites/25544'
//函数从api获取数据
异步函数getShip（）{
const response=wait fetch（api_url）；
const data=wait response.json（）；
常数{纬度，经度}=数据；
marker.setLatLng（[纬度，经度]）
marker.bindpoop（“纬度\xa0\xa0\xa0\xa0\xa0:\xa0\xa0”+经度+”
经度：\xa0\xa0”+经度）；
document.getElementById（'lat'）。textContent=纬度；
document.getElementById（'lon'）。textContent=经度；
markers.addLayer（marker）
}
getShip（）；
L.control.layers（markers）.addTo（mymap）
设置间隔（getShip；，1000）；

如果您想在每个请求中添加一个新的标记，则每次也需要创建一个新的标记：

async function getShip() {
            const response = await fetch(api_url);
            const data = await response.json();
            const { latitude, longitude} = data;    
            //Marker
            const marker = L.marker([latitude, longitude],{icon:Icono}); 
            marker.bindPopup("Latitud\xa0\xa0\xa0\xa0\xa0:\xa0\xa0"+longitude+"<br>Longitude:\xa0\xa0"+latitude);
            document.getElementById('lat').textContent= latitude;
            document.getElementById('lon').textContent= longitude;
            markers.addLayer(marker)
        }

异步函数getShip（）{ const response=wait fetch（api_url）； const data=wait response.json（）； 常数{纬度，经度}=数据； //标记 const marker=L.marker（[纬度，经度]，{icon:Icono}）； marker.bindpoop（“纬度\xa0\xa0\xa0\xa0\xa0:\xa0\xa0”+经度+”
经度：\xa0\xa0”+经度）； document.getElementById（'lat'）。textContent=纬度； document.getElementById（'lon'）。textContent=经度； markers.addLayer（marker） }

---

我还认为应该是

setInterval（getShip，1000）而不是
setInterval（getShip；，1000）
我现在有另一个问题，它在地图中放置了标记，但没有删除旧的标记，因此我在地图中有数百个标记map@JoseIgnacioHeusser：你应该把这个问题作为一个新问题单独提出来。也就是说，类似的话题已经有很多问题了，所以，你们可能已经找到了一些解决方案。