在谷歌地图上更新半径

Question

我正在尝试通过从数据库中获取半径来更改我的谷歌地图上的半径。现在我只得到“初始状态”半径，之后很难在整个地图上更新它。这与更新用户的位置也是同样的问题（我认为）。我正在使用 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;

Answer 1

你在哪里调用 getRadius 函数？您可以检查您的半径状态是否正在更新？如果您仅获取半径的初始值，则它可能没有被更新。此外，在apiIsLoaded 内创建新圆并将其半径值设置为半径状态不会改变圆半径，这是因为它只会使用您的状态半径的初始值创建一个圆。为了能够改变你的圆的参数，比如它的半径，你需要把它放在一个变量中，并在每次状态改变时改变这个变量。

这是我所做的： 首先，做一个全局变量：let circle;

然后在您的 apiIsLoaded 中将 circle 对象作为您的 circle 变量的值：

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

然后在你改变圆圈状态的函数中，你需要输入circle.setRadius(this.state.radius)。这将改变你的圆的半径值。所以在你的代码中，我可以看到这是改变状态的函数。请看我如何为下面的圆设置半径：

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

这是我的sample code，它下面的代码 sn-p 与你的有点不同，因为我只是输入了半径的值并单击按钮来更改它的值。

import React, { Component } from "react";
import GoogleMapReact from "google-map-react";
import "./style.css";

let circle;
class GoogleMaps extends Component {
  constructor(props) {
    super(props);

    this.state = {
      center: { lat: 40.756795, lng: -73.954298 },
      inputRad: 100
    };
  }

  onChange = e => {
    this.setState({
      inputRad: e.target.value
    });
  };
  changeRadius = () => {
    console.log(Number(this.state.inputRad));
    circle.setRadius(Number(this.state.inputRad));
  };

  render() {
    console.log(this.state.inputRad)
    const apiIsLoaded = (map, maps) => {
      circle = new maps.Circle({
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.3,
        map,
        center: this.state.center,
        radius: this.state.inputRad
      });
    };
    return (
      <div>
        <div style={{ height: "400px", width: "100%" }}>
          <input
            placeholder="Enter radius"
            type="number"
            min="100"
            name="inputRad"
            onChange={this.onChange}
          />
          <input
            value="Change circle radius"
            type="submit"
            onClick={this.changeRadius}
          />
          <GoogleMapReact
            bootstrapURLKeys={{
              key: "YOUR_API_KEY"
            }}
            defaultCenter={{ lat: 40.756795, lng: -73.954298 }}
            defaultZoom={15}
            center={this.state.center}
            yesIWantToUseGoogleMapApiInternals
            onGoogleApiLoaded={({ map, maps }) => apiIsLoaded(map, maps)}
          />
        </div>
      </div>
    );
  }
}
export default GoogleMaps;