时间戳

首页 > 解决方案 > 使用反应状态更改谷歌地图方向

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

问题描述

目标是当我单击方向 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,
    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;

标签： reactjsgoogle-mapsreact-stategoogle-directions-api

解决方案

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

我也可以看到你在打电话<DirectionsGoogleMap ...>。您如何通过this.state.addresses路线服务？

下面是我如何使用带有内联注释的库来实现此功能的示例代码和代码片段：@react-google-maps/api

索引.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"));

地图.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;

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;

推荐阅读