使用 Google 方向 API 获取 API 在 reactjs 中不起作用

Question

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

获取的错误

Answer 1

您的代码没有问题：

问题是 Google 方向 api，如果你想从客户端调用它，你必须使用他们的库，

Google disabled JSON-P callback for Geocoding to prevent abuse. You must use Google Geocoding API library to do the proper request, and the purpose of reverse Geocoding must be to show an address on Google Maps.

Hacked - Solutions : (Use proxy server)

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
}

使用 Google 方向 API 获取 API 在 reactjs 中不起作用

Fetch API with Google Directions API is not working in reactjs

reactjs

google-places-api

fetch