[英]React JS Google Maps Distance Matrix Error: Uncaught TypeError: locations.join is not a function at formatLocations (index.js:45)
I'm not sure if this is a bug so I'm going to ask for advice first since I'm very new to ReactJS 我不确定这是否是错误,所以我将首先征求意见,因为我是ReactJS的新手。
I'm trying to implement Google Distance Matrix to get the distance. 我正在尝试实现Google Distance Matrix以获取距离。
(If there are any pre-built reactjs alternative solution, please let me know) (如果有任何预建的reactjs替代解决方案,请告诉我)
My Code: 我的代码:
import React, {Component} from 'react';
import GoogleMap from 'google-distance-matrix';
//...
class View extends Component {
state = {
//...
address:'',
dest: '',
distanceText:'',
openModal: false,
foundDistance: false,
distanceText: "",
address: "New York NY",
dest: "Montreal"
};
constructor (props){
super(props)
this.searchUpdated = this.searchUpdated.bind(this);
this.handleFormSubmit = this.handleFormSubmit.bind(this);
}
handleFormSubmit = (event) => {
const component = this
// const { address, dest } = this.state
let address = "Toronto, ON, CA"
let dest = "Vancouver, ON, CA"
let origins = ['San Francisco CA', '40.7421,-73.9914'];
let destinations = ['New York NY', 'Montreal', '41.8337329,-87.7321554',
'Honolulu'];
event.preventDefault()
// console.log(event)
GoogleMap.matrix(address, dest, function (err, distances) {
distance.key('AIzaSyCFKLGuYz6ffYby7U-ODjFtV5TO4nDyevE');
distance.units('imperial');
console.log("address");
console.log(dest);
console.log(err);
console.log(distances);
if (err) {
return console.log(err);
}
if(!distances) {
return console.log('no distances');
}
if (distances.status == 'OK') {
if(distances.rows[0].elements[0]) {
var distance = distances.rows[0].elements[0].duration['text'];
console.log(distance);
component.setState({
foundDistance: true,
distanceText: distance
});
}
}
}).bind(this);
}
componentWillMount() {
//...
}
componentDidMount () {
// ...
}
render() {
//...
return (
<div>
<button onClick={this.handleFormSubmit}>Hello </button>
</div>
)
}
}
export default View;
I literally just want to console.log() the distance between two locations but I'm unable to do so... Right now, it's giving me this error: 我实际上只是想console.log()两个位置之间的距离,但我无法这样做...现在,这给了我这个错误:
Uncaught TypeError: locations.join is not a function at formatLocations (index.js:45) What the error gives me:
未被捕获的TypeError:formatsLocations(index.js:45)上的locations.join不是函数,该错误给了我什么:
![]()
The error is emanating from your handleFormSubmit
function when you call GoogleMap.matrix
, it should look like this: 当您调用
GoogleMap.matrix
,该错误是从handleFormSubmit
函数发出的,该错误应如下所示:
handleFormSubmit = (event) => {
const component = this
// const { address, dest } = this.state
let address = ["Toronto, ON, CA"];
let dest = ["Vancouver, ON, CA"];
event.preventDefault()
// console.log(event)
GoogleMap.matrix(address, dest, function (err, distances) {
Notice the brackets for Toronto and Vancouver; 注意多伦多和温哥华的括号; the package expects those two arguments to be arrays, not strings
程序包期望这两个参数是数组,而不是字符串
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.