Динамически изменить радиус и обновить текущую позицию (Google-карта-реагировать) - PullRequest
Новая
       70

Динамически изменить радиус и обновить текущую позицию (Google-карта-реагировать)

0 голосов
/ 26 апреля 2020

Я использую google-map-реакции и хочу иметь возможность динамически изменять положение и радиус. В настоящее время выбранный радиус сохраняется в базе данных и выбирается с помощью функции getRadius (), но я не знаю, как и когда его вызывать, поэтому радиус всегда отображается на расстоянии 1000 метров.

Я пытался использовать метод setRadius, но я не знаю, как получить к нему доступ извне функции apiIsLoaded. Пожалуйста, помогите! 

import React, { useRef } from 'react';
import GoogleMapReact from 'google-map-react';
import Marker from './MapMarker';
import {getUserInfo} from '../firebaseConfig'

class SimpleMap extends React.Component {

  constructor(props){
    super(props);
    this.googleMapCircle = React.createRef();
    this.state = {
      lat: "",
      lng: "",
      userPos: "",
      radius: 1000,
    };
  }

  static defaultProps = {
    center: {
      lat: 59.8,
      lng: 17.63889
    },
    zoom: 11
  };

  componentDidMount = () => {
    if (navigator.geolocation){
    navigator.geolocation.watchPosition(this.currentCoords)
    this.getRadius();
  }
  };

  currentCoords = (position) => {
    const latitude = position.coords.latitude
    const longitude = position.coords.longitude
    this.setState(prevState => ({
      userPos: {...prevState.userPos,
        lat: latitude, lng: longitude
      }
    }) 
    )
  };

  getRadius = () => {
    getUserInfo().then((result) => {
      this.setState({
        radius: result.radius
      })  
      }); 
  };

  componentDidUpdate = (prevState) => {
    if (prevState.radius !== this.state.radius) {
      //This is where I want to update radius
      }
    };

     apiIsLoaded = (map, maps, setUserPos, setUserRadius) => {
        var circle = new maps.Circle({
        ref:this.googleMapCircle,
        strokeColor: "001e57",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#bbd0ff",
        fillOpacity: 0.3,
        map:map,
        center: setUserPos,
        radius: setUserRadius
      });
    };

  render() {

    const setCenter = this.state.userPos;
    const setUserPos = this.state.userPos;
    const setUserRadius = this.state.radius;


    return (

      <div style={{ height: '100%', width: '100%' }}>

        <GoogleMapReact
          bootstrapURLKeys={{ key: 'AIzaSyB1OBf8rN8thOb-BW9QdiMc06NOuBvFrNI' }}
          defaultCenter={this.props.center}
          center={setCenter}
          defaultZoom={this.props.zoom}
          yesIWantToUseGoogleMapApiInternals
          onGoogleApiLoaded={({ map, maps}) => this.apiIsLoaded(map, maps, setUserPos, setUserRadius)}
        > 

          <Marker
            lat={setUserPos.lat}
            lng={setUserPos.lng}
            color="blue"
          />

        </GoogleMapReact>
      </div>
    );
  }
}

export default SimpleMap;
...