使用反应状态更改谷歌地图方向

如何解决使用反应状态更改谷歌地图方向

目标是当我单击方向 1 按钮时，谷歌地图会呈现该方向，而当单击方向 2 按钮时，地图会在谷歌地图上显示其他方向。我试图在 handleClick1-2 时更改地址状态，但在 handleClick 函数中 console.logs 在控制台上显示未定义，所以我想我需要对更新状态做一些事情。我将代码简化为易于理解，根据要求，我也可以将谷歌地图功能添加到问题中。我已经很感激了。

我的地图组件

const addresses1 = [
  {
    latitude: 33.000,longitude: -84.000,},{
    latitude: 36.000,longitude: -80.000,}
];
const addresses2 = [
  {
    latitude: 35.000,longitude: -74.000,{
    latitude: 32.000,}
];

class Map extends Component {
  constructor(props) {
    super(props);
    this.state = {
      addresses: addresses1,directions: null,prevAddresses: null,};
  }
  componentDidMount() {
    this.getDirections(this.state.addresses);
  }

  handleClick1 = () => {
    this.setState({ addresses: addresses1 });
    console.log(this.addresses); // <--- shows undefined
  };
  handleClick2 = () => {
    this.setState({ addresses: addresses2 });
    console.log(this.addresses); // <--- also shows undefined
  };

  render() {
    //... makers and direction functions
    return (
      <>
          <DirectionsGoogleMap ...>
          <Button onClick={this.handleClick1} > Direction1 </Button>
          <Button onClick={this.handleClick2} > Direction2 </Button>
      </>
    );
  }
}

export default Map;

解决方法

你在使用任何谷歌地图反应库吗？在您的代码段中有一条注释 console.log(this.addresses); // <--- shows undefined。您需要像这样调用它 console.log(this.state.addresses); 以获取状态变量 addresses 的值。

我还可以看到您正在呼叫 <DirectionsGoogleMap ...>。您如何在路线服务中传递 this.state.addresses？

下面是一个 sample code 和代码片段，说明我如何使用带有内嵌注释的 @react-google-maps/api 库来实现这一点：

Index.js

import React from "react";
import { render } from "react-dom";
import { LoadScript } from "@react-google-maps/api";
import Map from "./Map";
import "./style.css";

const lib = ["places"];
const key = ""; // PUT GMAP API KEY HERE
class App extends React.Component {
  render() {
    return (
      <LoadScript googleMapsApiKey={key} libraries={lib}>
        <Map />
      </LoadScript>
    );
  }
}

render(<App />,document.getElementById("root"));

Map.js

import React,{ Component } from "react";

import DirectionsMap from "./DirectionsMap";

let addresses1 = [
  {
    lat: 33.0,lng: -84.0
  },{
    lat: 36.0,lng: -80.0
  }
];
let addresses2 = [
  {
    lat: 34.0,{
    lat: 33.0,lng: -84.0
  }
];

class Map extends Component {
  constructor(props) {
    super(props);
    this.state = {
      addresses: addresses1
    };
  }

  handleClick1 = () => {
    this.setState({ addresses: addresses1 });
  };
  handleClick2 = () => {
    this.setState({ addresses: addresses2 });
  };

  render() {
    //... makers and direction functions
    return (
      <div>
        <DirectionsMap coords={this.state.addresses} />
        <button onClick={this.handleClick1}> Direction1 </button>
        <button onClick={this.handleClick2}> Direction2 </button>
      </div>
    );
  }
}

export default Map;

DirectionsMap.js

/*global google*/

import React from "react";
import { GoogleMap,DirectionsRenderer } from "@react-google-maps/api";

const defaultLocation = {
  lat: 32.0,lng: -84.0
};

let directionsService;
class DirectionsMap extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    directions: null
  };

//this will load the directions in map load
  onMapLoad = map => {
    directionsService = new google.maps.DirectionsService();
    this.changeDirection(this.props.coords[0],this.props.coords[1]);
  };

//this will check if your props changes and render the new value of your props the props will be the parameter you passed inside <DirectionsMap /> in DirectionsMap.js
  componentDidUpdate = prevProps => {
    if (prevProps !== this.props) {
      this.changeDirection(this.props.coords[0],this.props.coords[1]);
    }
  };

  //function that is calling the directions service
  changeDirection = (origin,destination) => {
    directionsService.route(
      {
        origin: origin,destination: destination,travelMode: google.maps.TravelMode.DRIVING
      },(result,status) => {
        if (status === google.maps.DirectionsStatus.OK) {
          //changing the state of directions to the result of direction service
          this.setState({
            directions: result
          });
        } else {
          console.error(`error fetching directions ${result}`);
        }
      }
    );
  };

  render() {
    return (
      <div>
        <GoogleMap
          center={defaultLocation}
          zoom={5}
          onLoad={map => this.onMapLoad(map)}
          mapContainerStyle={{ height: "400px",width: "800px" }}
        >
          {this.state.directions !== null && (
            <DirectionsRenderer directions={this.state.directions} />
          )}
        </GoogleMap>
      </div>
    );
  }
}

export default DirectionsMap;