是否有任何方法只从googleplacesautocomplete自动完成api上的用户输入获取城市和国家使用react？

Question

我不能只得到城市和国家作为一个输出，从谷歌自动完成组件使用的反应。

Answer 1

这样做的方法是在组件上指定types参数。但是，存在的限制是您只能为类型指定以下选项之一：

您可以通过传递类型参数将来自parameter请求的结果限制为特定类型的结果。该参数指定类型或类型集合，如下所支持的类型所示。如果未指定任何类型，则返回所有类型。一般来说，只允许一种类型。例外情况是，您可以安全地混合地理代码和建立类型，但请注意，这将与指定任何类型相同。

来源：类型

因此，对您的情况最好的选择可能是使用(regions)类型的集合，但这将包括不仅仅是城市和国家，如社区。另一个选项是使用只包含城市的(cities)类型集合。

我还强烈推荐反应-地理暗示库，如果您想要一些预先制作的东西来完成这一任务，因为您可以将这些作为参数传递并自己编写样式。

<Geosuggest
  types={['(regions)']}
/>

编辑

我想我可能有点误解了这个问题。如果您想知道如何从Places中获取街道地址、城市和国家的响应，那么您必须提交一个额外的请求。

一旦用户从列表中选择了位置，您就必须将place_id从原始请求中提取出来并提交一个地点细节请求。响应中的一个字段是address_component，它有这个非常奇怪的格式。我发布了一个示例，说明这种完整的格式是什么样子的这里。

我做了一个简单的转换函数，它将以可管理的格式返回地址的基本组件：

// ---------------------------------------------------------------------- //
// https://developers.google.com/maps/documentation/geocoding/intro#Types //
// ---------------------------------------------------------------------- //

// returns:

// {
//   address_1
//   address_2
//   city
//   state_code
//   zip_code
//   country
// }

function convertAddressComponents(addrComp) {
  let newAddr = {};
  let address_1 = [];
  addrComp.forEach((el, i) => {
    if (el.types.includes("post_box")) {
      address_1.push(el.long_name);
    } else if (el.types.includes("street_number")) {
      address_1.push(el.long_name);
    } else if (el.types.includes("route")) {
      address_1.push(el.long_name);
    } else if (el.types.includes("subpremise")) {
      newAddr.address_2 = el.long_name;
    } else if (el.types.includes("locality")) {
      newAddr.city = el.long_name;
    } else if (el.types.includes("administrative_area_level_1")) {
      newAddr.state_code = el.short_name;
    } else if (el.types.includes("postal_code")) {
      newAddr.zip_code = el.short_name;
    } else if (el.types.includes("country")) {
      newAddr.country = el.long_name;
    }
  });
  newAddr.address_1 = address_1.join(" ");

  return newAddr;
}

请随意修改此选项以满足您的需求。