我可以在 react-google-maps/api 中设置“默认中心”值吗？

Question

我使用原始的react-google-maps 包有一段时间了，但意识到它已经有几年没有更新了，所以我安装了一个名为react-google-maps/api 的更新包。这两个包都有一个名为<GoogleMap/> 的组件，但旧包有一个可以传递给它的名为defaultCenter 的道具。声明此属性将使得当安装地图组件时，此值将是中心，但不会在组件重新渲染时更改中心。这个新包似乎只有一个名为center 的道具，并且无论何时重新渲染，地图都会回到这个值。这是说明我的问题的代码：

import { GoogleMap, LoadScript } from '@react-google-maps/api'

function App() {

  const [someState, setSomeState] = useState(false);

  return (
    <div className="App">
      <button className="" onClick={() => {someState ? setSomeState(false) : setSomeState(true)}}>Click</button>
      <LoadScript
        id="script-loader"
        googleMapsApiKey=""
      >
        <GoogleMap
          id='example-map'
          mapContainerStyle={{
            height: '900px',
            width: '900px'}}
          center={{lat:41, lng: -71}}
          zoom={4}
        >
        </GoogleMap>
      </LoadScript>
    </div>
  );
}

export default App;

会发生以下情况：
1) 页面加载到指定中心
2) 我将地图拖到不同的位置
3) 我按下改变状态的按钮
4）地图重新加载回原来的中心

当我按下设置状态的按钮时，如何让地图保持在当前位置？

Answer 1

这是意料之中的。当组件<App/>被重新渲染时，内部的<GoogleMap/>组件也是如此。

您可以使用 onLoad 属性和 useRef 挂钩检索地图实例，因此您可以使用带有 .current 属性的实例并使中心处于状态。

当用户拖动地图时（触发 onDrag、onDragEnd 和 onDragStart 事件），您可以使用您保存的 ref 实例设置新中心。

function App() {
  const mapRef = useRef(null);
  const [position, setPosition] = useState({
      lat: 41, 
      lng: -71
  });

  function handleLoad(map) {
    mapRef.current = map;
  }

  function handleCenter() {
    if (!mapRef.current) return;

    const newPos = mapRef.current.getCenter().toJSON();
    setPosition(newPos);
  }

  return (
    <GoogleMap
      zoom={4}
      onLoad={handleLoad}
      onDragEnd={handleCenter}
      center={position}
      id="map"
      mapContainerStyle={{
        height: '900px',
        width: '900px'
      }}
    >
   </GoogleMap>
  );
}