Фильтрация маркеров на карте Google по радиусу с помощью React Api google-map-реагирует - PullRequest
Новая
       24

Фильтрация маркеров на карте Google по радиусу с помощью React Api google-map-реагирует

0 голосов
/ 12 октября 2018

Я пытаюсь отобразить маркеры на основе предоставленного радиуса - я не могу разработать логику для этого.Ваша помощь была бы признательна за следующий простой компонент реагирования, который отображает массив маркеров.

МОЯ проблема: я не знаю, как использовать свойство radius и где разместить это свойство, и на основе радиуса как фильтровать маркеры 

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;
...