我如何检查 point/place 是否在路线上或附近（方向 API）？ - 反应

Question

我正在尝试检查 C 点是否落在 A 和 B 之间绘制的路线上（或路线附近）。我找不到任何有关如何在 React 中执行此操作的示例。我发现了一些关于创建多段线的内容，它遵循路线，然后将其与 isLocationOnEdge() 一起使用，但我不确定如何将它用于我的示例。下面是构建 A 和 B 之间路由的代码。

任何答案将不胜感激。谢谢！

import React, { Component } from "react";
import {
  GoogleMap,
  LoadScript,
  DirectionsService,
  DirectionsRenderer,
} from "@react-google-maps/api";
class Directions extends Component {
  constructor(props) {
    super(props);
    this.state = {
      response: null,
      travelMode: "DRIVING",
      origin: "",
      destination: "",
    };
    this.directionsCallback = this.directionsCallback.bind(this);
    this.getOrigin = this.getOrigin.bind(this);
    this.getDestination = this.getDestination.bind(this);
    this.onClick = this.onClick.bind(this);
    this.onMapClick = this.onMapClick.bind(this);
  }
  directionsCallback(response) {
    console.log(response);
    if (response !== null) {
      if (response.status === "OK") {
        this.setState(() => ({
          response,
        }));
      } else {
        console.log("response: ", response);
      }
    }
  }
  getOrigin(ref) {
    this.origin = ref;
  }
  getDestination(ref) {
    this.destination = ref;
  }
  onClick() {
    if (this.origin.value !== "" && this.destination.value !== "") {
      this.setState(() => ({
        origin: this.origin.value,
        destination: this.destination.value,
      }));
    }
  }
  onMapClick(...args) {
    console.log("onClick args: ", args);
  }
  render() {
    return (
      <div className="map">
        <div className="map-settings">
          <hr className="mt-0 mb-3" />
          <div className="row">
            <div className="col-md-6 col-lg-4">
              <div className="form-group">
                <label htmlFor="ORIGIN">Origin</label>
                <br />
                <input
                  id="ORIGIN"
                  className="form-control"
                  type="text"
                  ref={this.getOrigin}
                />
              </div>
            </div>
            <div className="col-md-6 col-lg-4">
              <div className="form-group">
                <label htmlFor="DESTINATION">Destination</label>
                <br />
                <input
                  id="DESTINATION"
                  className="form-control"
                  type="text"
                  ref={this.getDestination}
                />
              </div>
            </div>
          </div>
          <button
            className="btn btn-primary"
            type="button"
            onClick={this.onClick}
          >
            Build Route
          </button>
        </div>
        <div className="map-container">
          <LoadScript googleMapsApiKey="MY_API_KEY">
            <GoogleMap
              id="direction-example"
              mapContainerStyle={{
                height: "400px",
                width: "900px",
              }}
              zoom={4}
              center={{
                lat: 0,
                lng: -180,
              }}
              onClick={this.onMapClick}
              onLoad={(map) => {
                console.log("DirectionsRenderer onLoad map: ", map);
              }}
              onUnmount={(map) => {
                console.log("DirectionsRenderer onUnmount map: ", map);
              }}
            >
              {this.state.destination !== "" && this.state.origin !== "" && (
                <DirectionsService
                  options={{
                    destination: this.state.destination,
                    origin: this.state.origin,
                    travelMode: this.state.travelMode,
                  }}
                  callback={this.directionsCallback}
                  onLoad={(directionsService) => {
                    console.log(
                      "DirectionsService onLoad directionsService: ",
                      directionsService
                    );
                  }}
                  onUnmount={(directionsService) => {
                    console.log(
                      "DirectionsService onUnmount directionsService: ",
                      directionsService
                    );
                  }}
                />
              )}
              {this.state.response !== null && (
                <DirectionsRenderer
                  options={{
                    directions: this.state.response,
                  }}
                  onLoad={(directionsRenderer) => {
                    console.log(
                      "DirectionsRenderer onLoad directionsRenderer: ",
                      directionsRenderer
                    );
                  }}
                  onUnmount={(directionsRenderer) => {
                    console.log(
                      "DirectionsRenderer onUnmount directionsRenderer: ",
                      directionsRenderer
                    );
                  }}
                />
              )}
            </GoogleMap>
          </LoadScript>
        </div>
      </div>
    );
  }
}
export default Directions;

Answer 1

你是对的，你可以使用 isLocationOnEdge() 检查你的第三个点是否在你的路线折线附近或沿线。为此，您需要获取第三个点的坐标并使用 response.routes[0].overview_path 作为新折线的路径。这两个值将在您的 isLocationOnEdge() 参数中传递。

你打算如何在你的代码中传递第三点？如果您使用坐标，将其绘制在 isLocationOnEdge() 上会更容易，但是如果您将使用地址名称，则需要先将其传递给 Geocoding API 以获取坐标。

至于折线，你可以这样做：

let routePoly = new google.maps.Polyline({
      path: this.state.response.routes[0].overview_path,
    });

这是一个 sample code，它在不使用 Google 地图的任何反应库的情况下实现这一点。

我如何检查 point/place 是否在路线上或附近（方向 API）？ - 反应

How can I check if a point/place is on or near a route (Directions API) ? - React

google-maps

google-directions-api

reactjs