1

我正在使用 Google 的 node.js 客户端库,在我的 React 组件中可以在这里找到 - https://github.com/googlemaps/google-maps-services-js 。我正在尝试在此函数中使用 Google 距离矩阵:

googleMapsClient.distanceMatrix({
  origins: "1002 Deming Way, Madison, WI 53717",
  destinations: that.state.deliverycoords,
  units: "imperial"
}, function(err, response){
  if (err){
    console.log("Error: ", err);
  } else {
     that.setState(
      {
        delivery: Object.assign({}, that.state.delivery, {
          time: response.rows.elements[0].duration.text,
          miles: response.rows.elements[0].distance.text,
          deliveryFeeTotal:
            parseInt(response.rows.elements[0].distance.text.split(" ")[0]) *
            that.state.deliveryFeePerMile
        })
      },
      function() {
        console.log("Retrieved duration: ", that.state.delivery.time);
        console.log("Retrieved miles:", that.state.delivery.miles);
        console.log(
          "Retrieved total delivery fee: ",
          that.state.delivery.deliveryFeeTotal
        );
      }
    );
  }
});

that.state.deliverycoords是动态的。当我运行这个函数时,它发出请求,浏览器控制台返回:

无法加载https://maps.googleapis.com/maps/api/distancematrix/json?destinations=-94.12788%2C45.547585&origins=1002%20Deming%20Way%2C%20Madison%2C%20WI%2053717&units=imperial&key=AIzaSyCe43xuJivO4RphF2cmLx0WdkblWdP请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,不允许访问源“ https://1zjr04npqj.codesandbox.io ”。如果不透明的响应满足您的需求,请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

我在代码沙箱中运行此代码。问题:我该如何解决这个问题,我可以参考一些示例代码吗?. 谢谢

4

0 回答 0