如何在 React 上更新 Google 地图的位置

Question

我在一个组件中使用了一个Google地图，在主要组件中发送道具（坐标作为一个数组），最后第二个组件（地图）收到了这个，我想显示新位置在地图上。

不幸的是，这不起作用，坐标正确更改并且组件（地图）正确接收但没有刷新。因为当尝试这个时，地图是白色的（空的），没有显示

我怎样才能做到这一点？

主要成分

纬度和经度以坐标开始，whit setState 放了一个新的

不要放整个组件但是我是这样调用地图的

render() {
return (
    <div className="main">
        <div className="main__map">
            <TheMap center={[this.state.lat, this.state.lng]} />
        </div>

地图组件

import React from 'react'
import GoogleMapReact from 'google-map-react';

function TheMap(props){
    const MyCustomMarker = () => <span class="material-icons">place</span>;
    return(
        <GoogleMapReact
            yesIWantToUseGoogleMapApiInternals
            bootstrapURLKeys={{key:'THE KEY'}}
            defaultZoom={16}
            center={props.center}
        >
            <MyCustomMarker
                lat={props.center[0]}
                lng={props.center[1]}
            />
        </GoogleMapReact>
    )
}

export default TheMap

Answer 1

您可以使用钩子，useEffect() 可以使用更新的道具重新渲染您的组件。下面是代码片段。

import React,{useState , useEffect} from 'react';
import GoogleMapReact from 'google-map-react';

function TheMap(props){
    const [cordinates , setCordinates] = useState(props);
    const MyCustomMarker = () => <span class="material-icons">place</span>;
    
    useEffect(() => {
       setCordinates(props);
   }, [props])
   
    return(
        <GoogleMapReact
            yesIWantToUseGoogleMapApiInternals
            bootstrapURLKeys={{key:'THE KEY'}}
            defaultZoom={16}
            center={cordinates.center}
        >
            <MyCustomMarker
                lat={cordinates.center[0]}
                lng={cordinates.center[1]}
            />
        </GoogleMapReact>
    )
}

export default TheMap

如何在 React 上更新 Google 地图的位置

How update the location of Google Map on React

javascript

google-maps

reactjs

google-map-react