4

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

我能否成功更改位置，其平均值，将 lat 和 lng 传递给地图组件并将标记放在新位置，但地图视图仍位于旧位置。

我如何才能以新位置为中心？

主要部件

Lat 和 Lng 以坐标开始，而 setState 则放置一个新的

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

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
4

3 回答 3

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
于 2020-06-07T02:21:32.860 回答
0

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

lat 和 long 必须是 Number 类型

于 2022-02-14T16:46:35.457 回答
0

您需要确保在 center={coordinates} 中的坐标是一个新对象，而不仅仅是同一个对象，只是改变了 lat 和 lng 的值。否则 react 不会将其识别为已更改。如果它在上面不起作用，那么同一个对象已经传递给 props.center。

于 2022-02-11T11:33:08.867 回答