我的问题在于react-leaflet的
每当我设置默认的位置值时,MapContainer会居中显示该位置。但是当我通过Nominatim调用动态传递另一个值时,它不起作用。
这里是我调用Nominatim的代码:
<MapContainer>
无法动态设置中心位置。基本逻辑是我有一个表单,在表单中输入街道和门牌号,然后调用Nominatim获取一些JSON格式数据,从中提取建筑物的纬度和经度。我将这些经纬度传递给我的<MapContainer>
,但它没有任何响应。在react-leaflet v2中,它运作得非常好,但更新到v3后就停止了。每当我设置默认的位置值时,MapContainer会居中显示该位置。但是当我通过Nominatim调用动态传递另一个值时,它不起作用。
这里是我调用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);
}
};
这是我表单的onSubmit函数:
<form className={style.searchForm} onSubmit={e => {
e.preventDefault();
setQuery(street + " " + houseNumber.replace(/\//g, "-") + ", Tallinn");
setPosition({
ltd: lat,
lng: long
});
这里是我的MapBox组件,其中包含了我的leaflet地图:
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;
const updateMap = () => {
// console.log("updateMap() - lat ---> " + props.latitude);
// console.log("updateMap() - long ---> " + props.longitude);
return(
<MapContainer center={[props.latitude, props.longitude]} zoom={20}>
<TileLayer
url='https://{s}.tile.osm.org/{z}/{x}/{y}.png'
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
<OverpassLayer street={passStreet} houseNumber={passHouseNumber} />
</MapContainer>
);
}
return(
updateMap()
);
}