使用 Google Directions API 获取 API 在 reactjs 中不起作用答案

【问题标题】：Fetch API with Google Directions API is not working in reactjs使用 Google Directions API 获取 API 在 reactjs 中不起作用
【发布时间】：2017-11-21 11:18:28
【问题描述】：

async getDirections( ) {
    let resp = await fetch(`https://maps.googleapis.com/maps/api/directions/json?origin=13.010587,%2080.259151&destination=13.023261,%2080.277290`)
    let respJson = await resp.json();
    let points = Polyline.decode(respJson.routes[0].overview_polyline.points);
    let coords = points.map((point, index) => {
        return {
            latitude: point[0],
            longitude: point[1]
        }
    })
    this.setState({ coords: coords })
    return coords
}

这是我的代码。我收到错误，因为无法从 google api 获取

【问题讨论】：

错误是什么？控制台输出什么？
我猜 url 应该包含用户特定的键
用key试了也没来，获取失败是错误
@KarthickRaja，请您检查一下答案吗？
有效！！！！！！

标签： reactjs google-places-api fetch

【解决方案1】：

您的代码没有问题：

问题在于 Google Direction api，如果你想从客户端调用它，你必须使用他们的库，

Google 为地理编码禁用了 JSON-P 回调以防止滥用。你必须使用 Google Geocoding API 库来执行正确的请求，并且反向地理编码的目的必须是在 Google 上显示地址地图。

被黑 - 解决方案：（使用代理服务器）

async getDirections( ) {
    var proxy_url = 'https://cors-anywhere.herokuapp.com/';
    var target_url = 'https://maps.googleapis.com/maps/api/directions/json?origin=13.010587,%2080.259151&destination=13.023261,%2080.277290';
    var google_api_key = '&key=your_google_api_key'

    let resp = await fetch(`${proxy_url}${target_url}${google_api_key}`)
    let respJson = await resp.json();
    let points = Polyline.decode(respJson.routes[0].overview_polyline.points);
    let coords = points.map((point, index) => {
        return {
            latitude: point[0],
            longitude: point[1]
        }
    })
    this.setState({ coords: coords })
    return coords
}

【讨论】：