Javascript React JS Google Maps距离矩阵错误：未捕获类型错误：locations.join不是formatLocations的函数（index.JS:45）

我不确定这是否是一个bug，所以我将首先征求意见，因为我对ReactJS非常陌生

我正在尝试实现Google距离矩阵来获得距离

（如果有任何预构建的reactjs替代解决方案，请告诉我）

我的代码：

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;

import React，{Component}来自'React'；
从“谷歌距离矩阵”导入谷歌地图；
//...
类视图扩展了组件{
状态={
//...
地址：''，
目标：''，
距离文本：“”，
OpenModel:错误，
foundDistance:错误，
距离文本：“”，
地址：“纽约州纽约市”，
目的地：“蒙特利尔”
};
建造师（道具）{
超级（道具）
this.searchUpdated=this.searchUpdated.bind（this）；
this.handleFormSubmit=this.handleFormSubmit.bind（this）；
}
handleFormSubmit=（事件）=>{
const component=this
//const{address，dest}=this.state
let address=“多伦多，加利福尼亚州”
让dest=“温哥华，加利福尼亚州”
let origins=['加利福尼亚州旧金山'，'40.7421，-73.9914']；
让目的地=['纽约州'，'蒙特利尔'，'41.8337329，-87.7321554'，
“檀香山”]；
event.preventDefault（）
//console.log（事件）
谷歌地图。矩阵（地址、目的地、函数（错误、距离）{
距离键（'AIzaSyCFKLGuYz6ffYby7U-odjftv5到4ndyeve'）；
距离单位（“英制”）；
控制台日志（“地址”）；
控制台日志（dest）；
控制台日志（err）；
控制台日志（距离）；
如果（错误）{
返回console.log（err）；
}
如果（！距离）{
返回控制台.log（“无距离”）；
}
如果（distance.status==“OK”）{
if（距离。行[0]。元素[0]）{
var distance=距离。行[0]。元素[0]。持续时间['text']；
控制台日志（距离）；
组件设置状态({
对,，
距离文本：距离
});
}
}
}).约束（本）；
}
组件willmount（）{
//...
}
组件安装（）{
// ...
}
render（）{
//...
返回(
你好
)
}
}
导出默认视图；

我真的只是想控制台.log（）两个位置之间的距离，但我不能这么做。。。现在，它给了我一个错误：

未捕获类型错误：locations.join不是函数 在格式化位置（index.js:45） 错误给了我什么：

---

调用

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) {

---

注意多伦多和温哥华的括号；软件包希望这两个参数是数组，而不是字符串。调用

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) {

---

注意多伦多和温哥华的括号；软件包希望这两个参数是数组，而不是字符串

Hi，非常感谢。现在这一部分被绕过了，我在这里遇到了CORS，你能帮我解决这个问题吗？（我暂时向您投了赞成票）请注意，您使用的软件包不是用于浏览器的。CORS问题是众所周知的，不被认为是一个缺陷：嗨，非常感谢。现在这一部分被绕过了，我在这里遇到了CORS，你能帮我解决这个问题吗？（我暂时向您投了赞成票）请注意，您使用的软件包不是用于浏览器的。CORS问题是已知的，不被视为缺陷：