如何在@react-google-maps/api中使用getCenter获取当前地图中心坐标？

Question

我正在使用来自 @react-google-maps/api 的 GoogleMap 组件，但似乎无法找到移动后如何获得当前居中的地图坐标（纬度和经度）？

通过四处搜索，我找到了 this 篇文章，其中提出了类似的问题，但 none 的答案对我有用。下面是我正在测试的代码。

import { GoogleMap, useLoadScript } from "@react-google-maps/api";

const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
});

export default function Test() {
    return (
        <>
            <GoogleMap
                zoom={8}
                center={{lat: 35.6676095, lng: 139.334863}}
                // onCenterChanged={getCenter} - doesn't work
                // onCenterChanged={getCenter()} - doesn't work
                // onCenterChanged={this.getCenter} - doesn't work
                // onCenterChanged={ (e)=> this.getCenter(e)}  - doesn't work
            >
            </GoogleMap>
        </>
    );
}

地图加载正常，但是一旦我添加了 onCenterChanged= 属性，一切都崩溃了，因为显然没有声明 getCenter 函数。

我想在移动地图后得到一个带有中心坐标的变量或状态。我在哪里声明它以及如何使用它？

Answer 1

您需要在 onLoad 期间获取地图实例，然后使用一个状态来保存此实例，初始值为 null。在您的 onCenterChanged 函数中，检查地图实例的值是否不为空，然后获取其新中心。这是使用以下 sample code 和代码片段实现的：

import React, { useState } from 'react';
import { GoogleMap } from '@react-google-maps/api';
const defaultLocation = { lat: 11.174036305817275, lng: 76.3754534171875 };

function Map() {
  const [mapref, setMapRef] = React.useState(null);
  const handleOnLoad = map => {
    setMapRef(map);
  };
  const handleCenterChanged = () => {
    if (mapref) {
      const newCenter = mapref.getCenter();
      console.log(newCenter);
    }
  };

  return (
    <GoogleMap
      center={defaultLocation}
      zoom={8}
      onLoad={handleOnLoad}
      onCenterChanged={handleCenterChanged}
      mapContainerStyle={{ width: '100%', height: '88vh' }}
    />
  );
}

export default Map;

如何在@react-google-maps/api中使用getCenter获取当前地图中心坐标？

How can I get the current map center coordinates using getCenter in @react-google-maps/api?

javascript

reactjs

react-google-maps