javascript - 如何即时获取可编辑圆形 Google Map Api V3 的半径？是否可以？

Question

 var sunCircle = {
    strokeColor: "#c3fc49",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#c3fc49",
    fillOpacity: 0.35,
    map: map,
    center: userPosition,
    radius: 1000, // in meters
    editable:true
};
cityCircle = new google.maps.Circle(sunCircle);
cityCircle.bindTo('center', marker, 'position');

现在它的 Editable 是真的我们可以编辑圆，如果用户改变半径，我能得到半径吗？

score 7 · Accepted Answer

google.maps.event.addListener(cityCircle, 'radius_changed', function () {
    console.log(cityCircle.getRadius());
});

您可以在此处找到有关编辑事件的更多信息

score 0 · Accepted Answer

在 React 中，我们可以使用 ref

第 1 步：从反应库中导入 useRef

import React, { useRef } from 'react';

第 2 步：在反应组件中创建 refCircle 变量

let refCircle = useRef(null);

第 3 步：在 react 组件中创建 handleCircleRadius

const handleCircleRadius = () => {
  console.log('New Radius', refCircle.getRadius());
};

STEP 4：在圆形组件内使用 ref 和 handleCircleRadius 方法

<Circle
  ref={(ref) => (refCircle = ref)}
  defaultCenter={{
    lat: parseFloat(12),
    lng: parseFloat(12),
  }}
  defaultEditable={true}
  radius={parseFloat(1000)}
  center={{
    lat: parseFloat(12,
    lng: parseFloat(12),
  }}
  onRadiusChanged={handleCircleRadius}
  options={{ strokeColor: '#ff0000' }}
/>

注意：此循环方法从react-google-maps库中导入

图书馆链接：https ://www.npmjs.com/package/react-google-maps