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

你需要先存储地图实例，再通过实例调用getCenter()方法获取实时中心点坐标，完整实现如下：

完整可运行代码 #

import { useState, useRef } from 'react';
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() {
    // 存储Google Map原生实例
    const mapRef = useRef(null);
    // 存储当前中心点坐标状态
    const [currentCenter, setCurrentCenter] = useState({
        lat: 35.6676095,
        lng: 139.334863
    });

    // 地图加载完成时触发，获取地图实例存入ref
    const handleMapLoad = (map) => {
        mapRef.current = map;
    };

    // 中心点变更时触发，读取最新中心点更新到状态
    const handleCenterChange = () => {
        if (!mapRef.current) return;
        const center = mapRef.current.getCenter();
        setCurrentCenter({
            lat: center.lat(),
            lng: center.lng()
        });
        // 可在此处添加你的业务逻辑，比如打印、上报坐标等
        console.log('当前中心点坐标：', currentCenter);
    };

    // 异常与加载状态处理
    if (loadError) return <div>地图加载失败，请检查API密钥配置</div>;
    if (!isLoaded) return <div>地图加载中...</div>;

    return (
        <GoogleMap
            zoom={8}
            center={currentCenter}
            onLoad={handleMapLoad}
            onCenterChanged={handleCenterChange}
            // 必须设置地图容器宽高，否则地图无法正常渲染
            mapContainerStyle={{ width: '100%', height: '500px' }}
        >
        </GoogleMap>
    );
}

核心注意事项 #

• 所有原生Google Map方法（getCenter、getZoom等）都需要通过onLoad回调拿到的实例调用，不能直接在组件属性中调用未初始化的方法
• 你之前尝试的this.getCenter相关写法是类组件的语法，函数组件中无需使用this
• onCenterChanged回调本身没有返回参数，所有地图属性都需要从存储的地图实例中读取
• 你可以直接在组件其他位置使用currentCenter状态获取最新的中心点坐标

内容的提问来源于stack exchange，提问作者Smlok