我如何检查一个点/地点是否在路线上或附近(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,
});

下面是一个示例代码，它在不使用任何谷歌地图反应库的情况下实现了这一点。