如何解决React-Leaflet地图没有更新
我的问题是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);
}
};
这是我的表单的onSubmit:
<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;
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()
);
}
解决方法
我能够解决它。在文档中它表示为:
除其子对象外,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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。