无法从 Editable Circle onRadiusChanged 事件中获取半径值

Question

我是 React Google 地图的新手。我无法从 Circle 获取半径值。

https://github.com/JustFly1984/react-google-maps-api

我想获得圈子 redius onRadiusChanged 事件。

index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Map from './Map';
import './style.css';

const App = () => {
  return (
    <div>
      <Map
        googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyDurZQBXjtSzKeieXwtFeGe-jhZu-HEGQU&libraries=drawing"
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `400px` }} />}
        mapElement={<div style={{ height: `100%` }} />}
        center={{ lat: -33.8665433, lng: 151.1956316 }}
        zoom={15}
      />
    </div>
  );
};

render(<App />, document.getElementById('root'));

map.js

import React, { Component } from "react";
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
  Circle
} from "react-google-maps";

class MyMapComponent extends Component {

  constructor(props) {
        super(props);
        this.state = {
          radius: 50
        }
  }

  updateRadius(e) {
    console.log(e);
  }

  render() {
    return (
      <GoogleMap
        defaultZoom={this.props.zoom}
        defaultCenter={this.props.center}
      >
      <Marker google={this.props.google}
        name={'Dolores park'}
        draggable={true}
        onDragEnd={this.onMarkerDragEnd}
        position={this.props.center}
      />
        <Circle
          center={this.props.center}
          options={{
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 1,
            fillColor: "#FF0000",
            fillOpacity: 0.35,
            clickable: false,
            draggable: false,
            editable: true,
            visible: true,
            radius: this.state.radius, //Calculation in Meter
            zIndex: 1
          }}
          onRadiusChanged={this.updateRadius}
        />
      </GoogleMap>
    );
  }
}

export default withScriptjs(withGoogleMap(MyMapComponent));

结果 -

undefined

Answer 1

onRadiusChanged（作为 Circle class 的基础 center_changed event）事件不接受任何参数。由于 onRadiusChanged 事件处理程序方法未与其示例中的组件实例绑定，因此 更新的半径 可以这样确定：

updateRadius() {
    const updatedRadius = this.getRadius();
}

其中 this 指的是原生 Circle object。

无法从 Editable Circle onRadiusChanged 事件中获取半径值

Can not get radius value from Editable Circle onRadiusChanged event

google-maps

reactjs

react-google-maps