获取响应，但在代码中看不到它，使用 Google 的库调用 Places API

Question

我有一个React应用程序，它通过Google的专用places库调用Places API。

库的导入方式如下：<script defer src="https://maps.googleapis.com/maps/api/js?key=<API_KEY>&libraries=places&callback=initPlaces"></script>

上面的代码在/public中，在index.html中。在URL中指定的initPlaces回调如下所示：

function initPlaces() {
console.log("Places initialized");
}

要进行实际请求，请使用以下代码：

async function makeGapiRequest() {
const service = new window.google.maps.places.AutocompleteService();
const response = await service.getQueryPredictions({
input: "Verona"
});
console.log(res);
}

出于测试目的，单击文档时会调用该函数：

document.addEventListener("click", () => {
makeGapiRequest();
});

每一个请求都会得到回复。例如，当input的值为Verona时，会收到以下响应，并且仅在浏览器网络选项卡中可见：

{
predictions: [
{
description: "Verona, VR, Italy",
...
},
...
],
status: "OK"
}

每当调用maleGapiRequest时，即使API有可见响应，response变量在日志记录时也是未定义的，并且在控制台中抛出以下错误：

places_impl.js:31 Uncaught TypeError: c is not a function
at places_impl.js:31:207
at Tha.e [as l] (places_impl.js:25:320)
at Object.c [as _sfiq7u] (common.js:97:253)
at VM964 AutocompletionService.GetQueryPredictionsJson:1:28

此代码是从/public/index.html中导入的Places库中抛出的。

有没有人以前遇到过这个错误，或者知道问题出在哪里？如果解决方案对我来说是可用的，而不是图书馆，我会喜欢它。

Answer 1

问题是我调用了错误的方法。调用getPlacePredictions方法而不是getQueryPredictions。它将返回不同的结果，但您可以对其进行配置以满足您的需求。

旧代码：

async function makeGapiRequest() {
const service = new window.google.maps.places.AutocompleteService();
const response = await service.getQueryPredictions({
input: "Verona"
});
console.log(res);
}

新代码：

async function makeGapiRequest() {
const service = new window.google.maps.places.AutocompleteService();
const response = await service.getPlacePredictions({
input: "Verona",
types: ["(cities)"]
});
console.log(res);
}