javascript - 編集可能な円の半径をその場で取得する方法GoogleMapApi 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');

これで、編集可能がtrueになり、円を編集できます。ユーザーが半径を変更した場合、半径を取得できますか？

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: 反応コンポーネント内に handleCircleRadius を作成する

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

ステップ 4: circle コンポーネント内で 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