Reactjs 我可以设置一个'；默认中心'；谷歌地图/api中的值？

我使用了一段时间原始的

react谷歌地图

软件包，但意识到它已经有几年没有更新了，所以我安装了一个名为

react谷歌地图/api

的更新软件包。两个包都有一个名为

的组件，但旧包有一个可以传递给它的道具，名为

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;

从'@react google maps/api'导入{GoogleMap，LoadScript}
函数App（）{
const[someState，setSomeState]=useState（false）；
返回(
{someState？setSomeState（false）：setSomeState（true）}>单击
);
}
导出默认应用程序；

发生的情况如下：
1） 页面加载到指定的中心
2） 我将地图拖到另一个位置
3） 我按下改变状态的按钮
4） 地图将重新加载回原始中心

---

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

这是意料之中的。当组件

重新呈现时，内部的

组件也会重新呈现

您可以使用

onLoad

prop和useRef钩子检索map实例，因此可以使用

.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>
  );
}

函数应用程序（）{
const mapRef=useRef（null）；
常量[位置，设置位置]=使用状态({
拉丁美洲：41，
液化天然气：-71
});
功能手动加载（map）{
mapRef.current=map；
}
函数handleCenter（）{
如果（！mapRef.current）返回；
const newPos=mapRef.current.getCenter（）.toJSON（）；
设置位置（newPos）；
}
返回(
);
}

非常感谢您！唯一的问题是，如果

onCenterChanged

触发

handleCenter

，它似乎会导致无限循环。我能让它工作，只是把它忘了。然而，我想这可能是一个问题，如果中心的变化，而不是由于拖动事件。Opsss。。。我这边的错误。忘记移除已更改的道具。如果（newPos.lat===position.lat&&newPos.lng===position.lng）返回

到
handleCenter
函数，则可以添加以下检查