javascript - 使用 React Api google-map-react 根据半径过滤谷歌地图上的标记

Question

我正在尝试根据提供的半径显示标记 - 我无法为此开发逻辑。您的帮助将不胜感激以下是显示标记数组的简单反应组件。

我的问题：我不知道如何使用半径属性以及该属性的放置位置以及基于半径如何过滤标记

import React, { Component } from "react";
import { Button, Icon } from "semantic-ui-react";
import GoogleMapReact from "google-map-react";

  const Marker = () => {
    return <Icon name="marker" size="big" color="red" />;
  };

   class TestComp extends Component {

     state = {
             radius:1000,  
             center: {
                      lat: 25.368899246383727,
                      lng: 68.36254264299168
                     },
             zoom: 11,
             markers: [
                     {
                      lat: 25.368899246383727,
                      lng: 68.36254264299168
                     },
                     {
                      lat: 25.37404182345329,
                      lng: 68.34019660949707
                      },
                      {
                       lat: 25.36947282956474,
                       lng: 68.35902661761315
                      },
                       {
                       lat: 25.374256533212648,
                       lng: 68.38060696313482
                        },
                        {
                       lat: 25.375484023750584,
                       lng: 68.33971454473567
                        }
                     ]
                 };


              render() {
                  const markersDisplay = this.state.markers.map(marker => (
                                  <Marker lat={marker.lat} lng={marker.lng} 
                                   />
                                  ));

                  return (
                       <div style={‌{ height: "200px", width: "100%" }}>
                       <GoogleMapReact
                            bootstrapURLKeys={‌{
                            key: "AIzaSyAO71fLtOUqY4pPwwP6q1eb-DAaxe7XwMM"
                            }}
                           defaultCenter={this.state.center}
                           defaultZoom={this.state.zoom}
                        >
                           {markersDisplay}
                       </GoogleMapReact>
                   </div>

                   );
                 }
                }

         export default TestComp;