反应获取当前路线 - Javascript

我们经常会在网页上使用路线规划服务，如谷歌地图或百度地图。 在某些情况下，我们希望在页面上获取当前的路线信息，以便对该信息进行操作。在这里，我们将介绍使用JavaScript和反应库来获取当前路线。

步骤

1. 导入React和相关依赖项

我们需要在项目中安装并导入必要的依赖项，例如：react，react-dom和react-google-maps等。这些依赖项可以使用npm或yarn进行安装，具体操作视情况而定。

import React from 'react';
import ReactDOM from 'react-dom';
import { withGoogleMap, GoogleMap, DirectionsRenderer } from 'react-google-maps';

2. 在类中定义状态和方法

我们需要在React类中定义路线信息的状态，并在路线信息完成加载后调用该状态更新方法。 我们也需要定义一些参数，如起点，终点和Google Maps API密钥。

class MapWithDirections extends React.Component {
  state = {
    directions: null,
  };

  componentDidMount() {
    const { origin, destination } = this.props;

    const DirectionsService = new google.maps.DirectionsService();

    DirectionsService.route(
      {
        origin: origin,
        destination: destination,
        travelMode: google.maps.TravelMode.DRIVING,
      },
      (result, status) => {
        if (status === google.maps.DirectionsStatus.OK) {
          this.setState({
            directions: result,
          });
        } else {
          console.error(`error fetching directions ${result}`);
        }
      }
    );
  }

  render() {
    const { directions } = this.state;

    return (
      <GoogleMap defaultZoom={8} defaultCenter={this.props.origin}>
        {directions && <DirectionsRenderer directions={directions} />}
      </GoogleMap>
    );
  }
}

const Map = withGoogleMap(MapWithDirections);

3. 渲染组件

我们需要将路线信息包含在一个地图组件中，并将其呈现在页面上。

ReactDOM.render(
  <Map
    containerElement={<div style={{ height: `500px`, width: '100%' }} />}
    mapElement={<div style={{ height: `100%` }} />}
    origin={new google.maps.LatLng(37.774929, -122.419416)}
    destination={new google.maps.LatLng(37.3382082, -121.8863286)}
    loadingElement={<div style={{ height: `100%` }} />}
  />,
  document.getElementById('root')
);

以上是获取当前路线的整个过程。 我们可以在道路信息加载完毕后，从路线对象中提取所需信息。 这个例子只是展示了如何获取路线信息，您可以根据自己的需求进行定制。

代码片段

import React from 'react';
import ReactDOM from 'react-dom';
import { withGoogleMap, GoogleMap, DirectionsRenderer } from 'react-google-maps';

class MapWithDirections extends React.Component {
  state = {
    directions: null,
  };

  componentDidMount() {
    const { origin, destination } = this.props;

    const DirectionsService = new google.maps.DirectionsService();

    DirectionsService.route(
      {
        origin: origin,
        destination: destination,
        travelMode: google.maps.TravelMode.DRIVING,
      },
      (result, status) => {
        if (status === google.maps.DirectionsStatus.OK) {
          this.setState({
            directions: result,
          });
        } else {
          console.error(`error fetching directions ${result}`);
        }
      }
    );
  }

  render() {
    const { directions } = this.state;

    return (
      <GoogleMap defaultZoom={8} defaultCenter={this.props.origin}>
        {directions && <DirectionsRenderer directions={directions} />}
      </GoogleMap>
    );
  }
}

const Map = withGoogleMap(MapWithDirections);

ReactDOM.render(
  <Map
    containerElement={<div style={{ height: `500px`, width: '100%' }} />}
    mapElement={<div style={{ height: `100%` }} />}
    origin={new google.maps.LatLng(37.774929, -122.419416)}
    destination={new google.maps.LatLng(37.3382082, -121.8863286)}
    loadingElement={<div style={{ height: `100%` }} />}
  />,
  document.getElementById('root')
);

Enjoy coding!