反应传单地图不更新

问题描述

我的问题是 react-leaflet 没有以我动态设置的位置为中心.基本逻辑是，我有一个表格，可以在其中输入街道和门牌号，然后调用 Nominatim 并获取一些 JSON 格式的数据，从中提取建筑物的纬度和经度.这些经纬度我传递给我的 <MapContainer> 但它无论如何都没有响应.使用 react-leaflet v2 运行良好，但在我更新到 v3 后它停止了.

My issue is that react-leaflet <MapContainer> doesn't center on a position that I set dynamically.The basic logic is that I have a form where I enter Street and House Number, then I make call for Nominatim and get some JSON format data, from where I extract latitude and longitude of a building.These lat and long I pass to my <MapContainer> but it doesn't respond anyhow.With react-leaflet v2 with it was working pretty good, but after I updated to v3 it stopped.

每当我设置默认位置值时，MapContainer 都会以该位置为中心.但是当我通过 Nominatim 调用动态传递另一个值时，它不起作用.

Whenever I set default position values MapContainer centers on that position. But when I pass another value dynamically through Nominatim call it doesn't work.

我在这里呼吁提名:

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 组件，其中包含我的传单地图:

And here is my MapBox component which contains my leaflet Map:

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='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            />
            <OverpassLayer street={passStreet} houseNumber={passHouseNumber} />
        </MapContainer>
      );
  }

  return(
    updateMap()
  );
}

推荐答案

我能够解决它.在文档中它被声明为:

I was able to solve it. In documentation it is stated as:

除了它的孩子之外，MapContainer props 是不可变的:在第一次设置它们之后更改它们不会对 Map 实例或其容器产生影响.由 MapContainer 元素创建的 Leaflet Map 实例可由使用提供的钩子或 MapConsumer 组件之一的子组件访问.

这段代码有助于理解:

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;
}

这篇关于反应传单地图不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！