reactjs - 如何在输入和获取坐标时获取自动完成地址

Question

我想显示如下 UI

当用户开始输入关键字时，我想用点击特定名称时的搜索结果填充它。地图应该与标记一起显示，我想获取该标记指针的纬度和经度。

我可以像在 reactjs 中那样使用 google API for web 免费做吗，还是有其他好的 API

标签： reactjsgoogle-mapslocationmaps

Answer 1

这可以通过Google 的 Places Autocomplete API下拉菜单实现，您甚至可以将搜索范围缩小到特定国家/地区。我使用了一个非常好且相对简单的npm 包，您可以将其与下拉 API 调用集成，它们具有允许在下拉列表中获取数据的 lat 和 long 值的功能。

地图是一个单独的问题；我建议在用户选择他们想要的位置后，通过您的 URL 或通过道具将您的坐标传递给子组件。在您的地图组件中（需要将 Google Maps API 或其他地图（如 Mapbox）集成到组件中），您将使用这些坐标来定义标记（从道具等传递）。我还建议对地图使用 Google API，因为有 npm 包（已停产但仍然有效和更新的包）可以轻松地让您绘制自定义标记以及多个标记。