reactjs - 如何使用 @react-google-maps/api 在 ReactJS 中使用距离矩阵 API?
问题描述
我正在使用上面的包,但找不到合适的文档来实现代码。目前,这是我的代码:
import React, { Component } from "react";
import { GoogleMap, DistanceMatrixService } from "@react-google-maps/api";
class ExampleDirections extends Component {
state = {
response: null,
travelMode: "DRIVING",
origin: "",
destination: "",
};
distanceCallback = (response) => {
console.log("Hello");
console.log(response);
if (response !== null) {
if (response.status === "OK") {
this.setState(() => ({
response,
}));
} else {
console.log("response: ", response);
}
}
};
checkDriving = ({ target: { checked } }) => {
checked &&
this.setState(() => ({
travelMode: "DRIVING",
}));
};
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 = () => (
<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>
<div className="d-flex flex-wrap">
<div className="form-group custom-control custom-radio mr-4">
<input
id="DRIVING"
className="custom-control-input"
name="travelMode"
type="radio"
checked={this.state.travelMode === "DRIVING"}
onChange={this.checkDriving}
/>
<label className="custom-control-label" htmlFor="DRIVING">
Driving
</label>
</div>
</div>
<button
className="btn btn-primary"
type="button"
onClick={this.onClick}
>
Build Route
</button>
</div>
<div className="map-container">
<GoogleMap
id="map"
mapContainerStyle={mapContainerStyle}
zoom={14}
center={center}
options={options}
>
<DistanceMatrixService
options={{
destinations: this.state.destination,
origins: this.state.origin,
travelMode: this.state.travelMode,
}}
callback={this.distanceCallback}
/>
)}
</GoogleMap>
</div>
</div>
);
}
export default ExampleDirections;
此代码出现以下错误:
InvalidValueError:在属性来源中:不是数组
我想稍后一起使用所有其他服务,如路线、地点、自动完成功能。现在我正在尝试单独工作,我只遇到了这个问题。
更好的包装替代品也可以。谢谢你
继续
所以我用下面的答案解决了我的问题。但是,现在当我尝试将响应保存在某个状态时,API 会被无休止地调用。下面是我的代码。谢谢您的帮助。
<DistanceMatrixService
options={{
destinations: [{ lat: 1.296788, lng: 103.778961 }],
origins: [{ lng: 72.89216, lat: 19.12092 }],
travelMode: "DRIVING",
}}
callback={(res) => {
console.log("RESPONSE", res);
this.setState({
totalTime: res.rows[0].elements[0].duration.text,
totalDistance: res.rows[0].elements[0].distance.text,
});
}}
/>
当我只调用 console.log 或声明变量并在其中保存值时,它工作正常。但是,当我尝试使用 setState 时,会出现此问题。
解决方案
我也很难弄清楚改进后的 react-google-maps。我得到的距离矩阵如下:
<DistanceMatrixService
options={{
destinations: [{lat:1.296788, lng:103.778961}],
origins: [{lng:103.780267, lat:1.291692}],
travelMode: "DRIVING",
}}
callback = {(response) => {console.log(response)}}
/>
确保您的目的地和来源是数组,并且不要忘记启用所有必要的 API。
推荐阅读
- rust - 如何在编译时不知道结构的情况下读取 CSV 数据?
- android - 通知中的屏幕覆盖
- angular - 如何连接两个以上的可观察对象?
- python - 带有ajax的Django按钮GET请求
- javascript - 使用带有变量“id”和getElementById(Javascript)的“onclick”
- batch-file - 简单的批处理脚本不会按预期打印变量
- angular - 嗨,有没有办法通过按角度的选项卡按钮使日期输入框中的日期自动完成?
- javascript - Firestore 事务:如何编写可以作为事务发起者和非发起者的函数?
- c# - 如何知道合并单元格中的可编辑单元格地址
- c - C中递归形式的魔方