使用反应状态更改 google 映射方向

Question

目标是当我单击方向 1 按钮时 google 地图呈现该方向，当单击方向 2 按钮时，地图在 google 地图上显示其他方向。我试图在 handleClick1-2 时更改地址的状态，但 handleClick 函数内部 console.logs 在控制台上显示未定义，所以我认为我需要对更新状态做一些事情。我减少了代码以便于理解，根据要求我也可以向问题添加 google 地图函数。我已经很感激了。

我的地图组件

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,
    longitude: -84.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;

Answer 1

您是否在使用任何 google 地图反应库？在您的代码片段中有一条评论 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,
    lng: -84.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;

方向Map.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;

使用反应状态更改 google 映射方向

Changing google maps directions with react state

reactjs

google-maps

react-state

google-directions-api