React 应用程序中的地理编码不更新地图 React

Question

我正在尝试获取地图地理编码，但在加载地图时它从不使用新的纬度和经度。它始终是 useState 的原始版本。

const CustomMap = () => {
const [customLat, setCustomLat] = useState(0);
const [customLng, setCustomLng] = useState(0);

useEffect(() => {
    Geocode.fromAddress("Eiffel Tower").then(
        (response) => {
            const { lat, lng } = response.results[0].geometry.location;
            setCustomLat(lat);
            setCustomLng(lng);
        },
        (error) => {
            console.log(error.data);
        }
    );

}, [])

return (
    <GoogleMapReact
        bootstrapURLKeys={{ key: 'API_KEY' }}
        defaultCenter={{ lat: customLat, lng: customLng }}
        defaultZoom={11}>
    </GoogleMapReact>
)
}

尽管在控制台中我可以看到它正在获取带有 Eifell 毛巾的 url 的地图。

Fetch finished loading: GET "https://maps.googleapis.com/maps/api/geocode/json?address=Eiffel%20Tower&key=KEY&language=en".

这是最后一个控制台日志，但地图的中心仍然是原来的。

Answer 1

您使用的是默认设置，这仅适用于第一次渲染，要更新您需要使用中心，就像这样

  <GoogleMapReact
        bootstrapURLKeys={{ key: 'API_KEY' }}
        defaultCenter={{ lat: customLat, lng: customLng }}
        center = {{lat: customLat, lng: customLng}}
        defaultZoom={11}>
    </GoogleMapReact>

React 应用程序中的地理编码不更新地图 React

Geocode in react app not updating the map React

google-maps

geocoding

reactjs

use-effect