犯罪嫌疑人X
2023-07-14 16:51:55
我的問題是,react-leaflet<MapContainer>并不以我動態設置的位置為中心?;具壿嬍牵矣幸粋€表單,在其中輸入街道和門牌號,然后調用 Nominatim 并獲取一些 JSON 格式數據,從中提取建筑物的緯度和經度。這些經緯度和時間我傳遞給我的,<MapContainer>但它無論如何都沒有回應。使用react-leaflet v2它工作得很好,但是在我更新到v3之后它就停止了。每當我設置默認位置值時,MapContainer 都會以該位置為中心。但是,當我通過 Nominatim 調用動態傳遞另一個值時,它不起作用。在這里我呼吁提名:const getSearchData = async () => { const exampleReq = `https://nominatim.openstreetmap.org/search/${query}?format=json&building=*&addressdetails=1&limit=1&polygon_geojson=1`; const response = await fetch(exampleReq); const data = await response.json(); // console.log(data); if (data === undefined || data.length === 0) { // array empty or does not exist console.log("data array is empty"); alert("Given address unrecognized! Try again please.") setLatitude(DEFAULT_LATITUDE); setLongitude(DEFAULT_LONGITUDE); }else{ setLatitude(data[0].lat); setLongitude(data[0].lon); }};這是我的表單的提交:<form className={style.searchForm} onSubmit={e => { e.preventDefault(); setQuery(street + " " + houseNumber.replace(/\//g, "-") + ", Tallinn"); setPosition({ ltd: lat, lng: long });這是我的 MapBox 組件,其中包含我的傳單地圖:const MapBox = (props) => { useEffect(()=>{ console.log("MAPBOX!"); console.log("updateMap() - lat ---> " + props.latitude); console.log("updateMap() - long ---> " + props.longitude); updateMap(); },[props.street, props.houseNumber]); const passStreet = props.street; const passHouseNumber = props.houseNumber;
1 回答

喵喔喔
TA貢獻1735條經驗 獲得超5個贊
我能夠解決它。在文檔中是這樣描述的:
除了其子級之外,MapContainer 屬性是不可變的:第一次設置后更改它們不會對 Map 實例或其容器產生任何影響。子組件可以使用提供的掛鉤之一或 MapConsumer 組件來訪問由 MapContainer 元素創建的 Leaflet Map 實例。
這段代碼有助于理解:
function MyComponent() {
const map = useMap()
console.log('map center:', map.getCenter())
return null
}
function MyMapComponent() {
return (
<MapContainer center={[50.5, 30.5]} zoom={13}>
<MyComponent />
</MapContainer>
)
}
我實施的:
function MyComponent(props) {
const map = useMap();
map.setView(props.center, props.zoom);
return null;
}
添加回答
舉報
0/150
提交
取消