react-google-maps 在使用 onClick 事件时重置地图

如何解决react-google-maps 在使用 onClick 事件时重置地图

我在实现一些简单的 react-google-maps 代码时遇到了困难，只要点击标记或关闭信息框，地图就会将其位置重置为原始位置。我看到我应该将地图组件与更改状态分开呈现，但我不确定如何实现这一点。

感谢任何帮助

import React,{useState} from 'react';
import {Marker,GoogleMap,LoadScript,InfoWindow} from '@react-google-maps/api';


const MapContainer = ({markers}) => {
    const [selected,setSelected] = useState<any>({})

    const onSelect = (item) => {
        setSelected(item)
    }

    const mapStyles = {
        height: "100vh",width: "100%",}

    const defaultCenter = {
        lat: 45.510440,lng: -122.683338
    }

    const renderMap = () => {
    return <>
        <div>
            <LoadScript
                googleMapsApiKey='[Google Api KEY]'>
                <GoogleMap
                    mapContainerStyle={mapStyles}
                    zoom={13}
                    center={defaultCenter}
                    >

                {markers.map((marker)=> {
                    return(
                    <Marker 
                        position={{
                            lat: marker.lat,lng: marker.lng
                        }}
                        title={marker.title}
                        onClick={ () => onSelect(marker) }
                    />
                )})
                }
                {
                    selected.lng &&
                    <InfoWindow
                    position={
                        {
                            lat: selected.lat,lng: selected.lng
                        }
                    }
                    onCloseClick={() => setSelected({})}
                    >
                        <div>
                        <h3>{selected.title}</h3>
                        <p>{selected.info}</p>
                        </div>
                    </InfoWindow>
                }

                </GoogleMap>
            </LoadScript>
        </div>
    </>
    }

    return renderMap()
}

export default MapContainer; ```

解决方法

似乎将您的中心值置于一个状态并将点击的标记坐标设置为新中心将解决问题。这是一个 sample code 和一个代码片段：

str.format()