如何解决如何检查路径上或附近的点/地点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反应库即可实现此目的。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。