Обновление радиуса на карте Google - PullRequest
Новая
       19

Обновление радиуса на карте Google

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

Я пытаюсь изменить радиус на моей карте Google, выбирая его из базы данных. Пока я получаю только радиус «начального состояния», и после этого его сложно обновить на карте в целом. Это та же проблема, что и обновление позиции пользователя (я думаю). Я использую Firebase, React и Javascript.

Это код моей карты: 

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

class SimpleMap extends React.Component {
  state = {
    lat: "",
    lng: "",
    userPos: "",
    radius: 1500
  };



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



  componentDidMount = () => {
    navigator.geolocation.getCurrentPosition(this.currentCoords)

  };


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

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

      }); 
  }

  render() {

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


    const apiIsLoaded = (map, maps, setUserPos, setUserRadius) => {
      new maps.Circle({
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.3,
        map,
        center: setUserPos,
        radius: setUserRadius
      });
    };

    return (
      <div style={{ height: '100vh', width: '100%' }}>
        <GoogleMapReact
          bootstrapURLKeys={{ key: //key }}
          defaultCenter={this.props.center}
          center={setCenter}
          defaultZoom={this.props.zoom}
          yesIWantToUseGoogleMapApiInternals={true}
          onGoogleApiLoaded={({ map, maps }) => apiIsLoaded(map, maps, setUserPos, setUserRadius)}
        >
          <Marker
            lat={setUserPos.lat}
            lng={setUserPos.lng}
            color="blue"
          />

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

export default SimpleMap;
...