在传单地图上显示变化的数据

Question

我创建了一个非常简单的地图，用一个标记链接到变化的坐标。根据从json文件中提取的新坐标，标记每秒都会在地图上移动。是否有可能在地图窗口的固定位置显示变化的坐标?类似于一个图例，但改变了文本。类似的东西，但自动的，不需要鼠标点击:https://tomik23.github.io/leaflet-examples/#05.coordinates-after-clicking-on-the-map

Answer 1

import React, {useEffect} from 'react'
import {MapContainer, Marker, Popup, TileLayer, useMap, useMapEvents} from 'react-leaflet'
import 'leaflet/dist/leaflet.css';
import './MapScreen.css';
const MapScreen = () => {
function Location(){
const [position, setPosition] = React.useState({});
const map = useMapEvents({
click(e) {
map.locate()
setPosition({lat: e.latlng.lat, lng: e.latlng.lng})
},
locationfound(e) {
setPosition(e.latlng)
map.flyTo(e.latlng, map.getZoom())
},
})
return (
<div className='overlay'>
<h1>{position.lat}</h1>
<h1>{position.lng}</h1>
</div>
)
}
return (
<div className='container'>
<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
<TileLayer
attribution='<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[51.505, -0.09]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
{/*    Overlay map text*/}
<Location/>
</MapContainer>
</div>
);
}
export default MapScreen

Style.css→

.leaflet-container {
height: 600px;
width: 100%;
}
.overlay {
position: absolute;
bottom: 0;
width: 100%;
z-index: 1000;
background-color: rgba(255,255,255,0.5);
display: flex;
justify-content: center;
align-items: center;
}