谷歌地图的新位置如何在 React 上居中?

Question

我使用google-map-react显示带有自定义标记的Google地图来显示位置。

我可以成功更改位置，其平均值，将纬度和液化天然气传递给地图组件并将标记放在新位置，但地图的视图仍在旧位置。

如何在新位置居中？

主要成分

拉特和液化以坐标开头，白设置状态放一个新的

不要放置整个组件，但这是我调用地图的方式

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

地图组件

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={true}
bootstrapURLKeys={{key:'THE KEY'}}
defaultZoom={16}
center={cordinates.center}
>
<MyCustomMarker
lat={cordinates.center[0]}
lng={cordinates.center[1]}
/>
</GoogleMapReact>
)
}
export default TheMap

Answer 1

默认应将默认coordinates设置为任意位置，例如[10.00, 10.00]，然后将useEffect的依赖数组更改为[props.center]，最后将坐标值设置为props.center。

地图组件

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

Answer 2

你需要确保在 中心={坐标} 坐标是一个新对象，而不仅仅是纬度和液化天然气值刚刚更改的同一对象。否则反应不会将其识别为已更改。 如果它在上面不起作用，那么相同的对象已经传递给了 props.center。

Answer 3

发生这种情况是因为您将纬度和经度作为字符串发送，如果您从 reactdevtools 中检查 GoogleMapReac 元素并删除纬度和经度周围的引号，那么它将自动在地图上居中位置。

纬度和经度必须为数字类型