如何检查路径上或附近的点/地点Directions API？ -反应

问题描述

我正在尝试检查点C是否落在A和B之间绘制的路线上（或路线附近）。我在反应中找不到如何执行此操作的任何示例。我发现了一些关于创建折线的信息，该折线遵循该路线，然后将其与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;

解决方法

是的，您可以使用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 Maps反应库即可实现此目的。