我可以在 react-googe-maps/api 中设置一个 'default center' 值吗？

Question

我使用原来的 react-google-maps 包有一段时间了，但意识到它已经有几年没有更新了，所以我安装了一个名为 react-google-maps/api 的更新包。这两个包都有一个名为 <GoogleMap/> 的组件，但旧包有一个可以传递给它的 prop，名为 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>
  );
}

我可以在 react-googe-maps/api 中设置一个 'default center' 值吗？

Can I set a 'default center' value in react-googe-maps/api?

google-maps

reactjs

react-google-maps