React Google Maps API的Circle组件拖动/调整时获取center和radius的方法

一、@react-google-maps/api 库实现方式 #

核心逻辑是通过useRef拿到Circle组件对应的原生Google Maps实例，回调触发时直接从实例读取最新属性值即可，具体实现步骤如下：

• 导入useRef钩子，声明ref变量用来存储Circle原生实例
• 给Circle组件绑定onLoad回调，将加载完成的原生实例赋值给提前声明的ref
• 在onCenterChanged回调中，从ref实例调用getCenter()方法获取最新中心点坐标；在onRadiusChanged回调中，从ref实例调用getRadius()方法获取最新半径值

示例代码：

import { GoogleMap, Circle } from '@react-google-maps/api';
import { useRef, useState } from 'react';

const MapComponent = () => {
  const circleRef = useRef(null);
  // 初始中心点设为纽约坐标
  const [center, setCenter] = useState({ lat: 40.7128, lng: -74.0060 });
  // 初始半径设为1000米
  const [radius, setRadius] = useState(1000);

  const handleCircleLoad = (circleInstance) => {
    circleRef.current = circleInstance;
  };

  const handleCenterChange = () => {
    if (!circleRef.current) return;
    const newCenter = circleRef.current.getCenter();
    // 如需存储普通对象可调用toJSON()方法
    setCenter(newCenter.toJSON());
    console.log('最新中心点坐标：', newCenter.toJSON());
  };

  const handleRadiusChange = () => {
    if (!circleRef.current) return;
    const newRadius = circleRef.current.getRadius();
    setRadius(newRadius);
    console.log('最新半径值（米）：', newRadius);
  };

  return (
    <GoogleMap
      zoom={10}
      center={center}
      mapContainerStyle={{ width: '100%', height: '400px' }}
    >
      <Circle
        onLoad={handleCircleLoad}
        center={center}
        radius={radius}
        draggable={true}
        editable={true}
        onCenterChanged={handleCenterChange}
        onRadiusChanged={handleRadiusChange}
      />
    </GoogleMap>
  );
};

export default MapComponent;

二、原生Google Maps库实现方式 #

原生库的实现逻辑完全一致，也是通过实例直接读取更新后的属性：

• 初始化Circle实例后，给实例绑定center_changed和radius_changed事件监听
• 事件触发时直接从实例本身调用getCenter()、getRadius()即可拿到最新值

示例代码：

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: 40.7128, lng: -74.0060 },
  });
  const cityCircle = new google.maps.Circle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map: map,
    center: { lat: 40.7128, lng: -74.0060 },
    radius: 1000,
    draggable: true,
    editable: true
  });

  // 监听中心点变化
  cityCircle.addListener('center_changed', () => {
    const newCenter = cityCircle.getCenter();
    console.log('最新中心点坐标：', newCenter.toJSON());
  });

  // 监听半径变化
  cityCircle.addListener('radius_changed', () => {
    const newRadius = cityCircle.getRadius();
    console.log('最新半径值（米）：', newRadius);
  });
}

注意：这两个回调本身的设计就是无返回值的，Google Maps官方的设计逻辑就是所有属性更新都可以通过实例本身的get方法直接读取，不需要通过回调参数传递。

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