reactjs - 通过从头开始反应中两个经纬度之间的道路距离计算

Question

所以，我是反应新手。我正在尝试开发一个反应应用程序，其中我有一个包含多个对象的数组，每个对象包含不同的纬度和经度。我想通过使用谷歌 API 或类似的东西来计算两个纬度和经度之间的道路距离。我不想为此使用Haversine Formula。

标签： reactjsgoogle-mapsgoogle-distancematrix-apireact-google-mapsdistance-matrix

Answer 1

您可以使用Maps JavaScript API 的距离矩阵服务。

首先，您需要确保在代码中加载 Maps JavaScript脚本标记。加载脚本后，您可以调用距离矩阵服务并将数组中的第一个坐标作为原点数组传递，然后将第二个坐标作为目标数组传递。我提到了起点数组和目的地数组，因为距离矩阵服务的originsanddestinations参数需要一个或多个坐标的数组。我还使用状态来显示 DOM 中的值。请参阅下面的示例代码和代码片段。请使用您的 API 密钥使代码正常工作

import React, { Component } from "react";

class Map extends Component {
  constructor(props) {
    super(props);
    this.state = {
      originLat: null,
      originLng: null,
      destLat: null,
      destLng: null,
      distance: null
    };
    this.onScriptLoad = this.onScriptLoad.bind(this);
  }

  onScriptLoad() {
    let coordsArray = [
      { lat: 41.0082, lng: 28.9784 },
      { lat: 41.1082, lng: 28.9784 }
    ];
    this.setState({
      originLat: coordsArray[0].lat,
      originLng: coordsArray[0].lng,
      destLat: coordsArray[0].lat,
      destLng: coordsArray[0].lng
    });

    let service = new google.maps.DistanceMatrixService();
    service.getDistanceMatrix(
      {
        origins: [{ lat: this.state.originLat, lng: this.state.originLng }],
        destinations: [{ lat: this.state.destLat, lng: this.state.destLng }],
        travelMode: "DRIVING"
      },
      (response, status) => {
        if (status !== "OK") {
          alert("Error was: " + status);
        } else {
          this.setState({
            distance: response.rows[0].elements[0].distance.text
          });
        }
      }
    );
  }

  componentDidMount() {
    if (!window.google) {
      var s = document.createElement("script");
      s.type = "text/javascript";
      s.src = `https://maps.google.com/maps/api/js?key=YOUR_API_KEY`;
      var x = document.getElementsByTagName("script")[0];
      x.parentNode.insertBefore(s, x);
      // Below is important.
      //We cannot access google.maps until it's finished loading
      s.addEventListener("load", e => {
        this.onScriptLoad();
      });
    } else {
      this.onScriptLoad();
    }
  }

  render() {
    return (
      <div style={{ width: 500, height: 500 }} id={this.props.id}>
        <label>
          Origin:({this.state.originLat},{this.state.originLng})
        </label>
        <br />
        <label>
          Destination:({this.state.destLat},{this.state.destLng})
        </label>
        <br />
        <label>Distance:{this.state.distance}</label>
      </div>
    );
  }
}

export default Map;