无法从 react-native-google-places-autocomplete 查询中获取“distance_meters”字段

编程问答 2022-05-01

问题描述

在 Google Api (https://developers.google.com/maps/documentation/places/web-service/autocomplete) 的文档中，它说如果您使用带有 (latitude,longitude) 值的“origin”参数，它应该返回字段“distance_meters”。

当我将 api 调用放入浏览器 (https://maps.googleapis.com/maps/api/place/autocomplete/xml?input=Ar&types=establishment&origin=40.70823656815506,-73.94331559793082&key=) 时，我确实得到了“distance_meters”字段，如图像底部所示。

enter image description here

但是，当我在 react-native 中将相同的参数添加到 GooglePlacesAutocomplete 组件的“查询”道具中时，我只会返回上面显示的几个字段，而我没有得到“距离米”字段。

enter image description here

请告诉我如何使用 GooglePlacesAutocomplete 字段获取“distance_meters”字段。我的代码如下，我正在控制台记录来自 renderRow 的 rowData。

enter image description here

enter image description here

解决方法

当您检查 react-native-google-places-autocomplete 库的 GooglePlacesAutocomplete.d.ts source file 时，滚动查看 interface Query，您会注意到 origin 参数尚未包含在图书馆

// @see https://developers.google.com/places/web-service/autocomplete
interface Query<T = AutocompleteRequestType> {
  key: string;
  sessiontoken?: string;
  offset?: number;
  location?: string;
  radius?: number;
  language?: Language;
  components?: string;
  rankby?: string;
  type?: T;
  strictbounds?: boolean;
  // deprecated. see https://github.com/FaridSafi/react-native-google-places-autocomplete/pull/384
  types?: T;
}

此外，要查看所有自动完成预测结果，您可以使用 renderDescription 函数并记录数据，因为该函数确定传递给每个 renderRow（搜索结果）的数据。

renderDescription={(data) => console.log(data)}

在此 sample code 中，您将看到 distance_meters 未返回，因为 origin 参数未在 Query 接口中定义。

您可以在 github 存储库 here 上提交问题。

google-mapsgoogleplacesautocompletereact-native