【问题标题】:How to get autocomplete address while typing and get coordinates如何在输入和获取坐标时获取自动完成地址
【发布时间】:2020-07-20 11:19:48
【问题描述】:

我想显示如下 UI

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

我可以像在 reactjs 中那样使用 google API for web 免费进行此操作吗 或者有没有其他好的API

【问题讨论】:

    标签: reactjs google-maps location maps


    【解决方案1】:

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

    地图是一个单独的问题;我建议在用户选择他们想要的位置后,通过您的 URL 或通过道具将您的坐标传递给子组件。在您的地图组件中(需要 Google Maps API 或其他地图,如 Mapbox 集成到组件中),您将使用这些坐标来定义标记(从道具等传递)。我还建议对地图使用 Google API,因为有 npm 包(discontinued but still worksmore recent package)可以轻松地让您绘制自定义标记以及多个标记。

    【讨论】:

    • 但 googls API 要求提供计费帐户。它不是免费的
    • 是的,它在一定程度上是免费的。如果您留在$200 worth of requests per month 下,它是免费的。如果您超过此限制,他们需要您的帐单信息才能向您收费。我一直在三个不是很大的应用程序上使用 Google API,所以我总是在这个限制之下。您会发现大多数地图都不是“免费”使用的,或者如果它们在某些时候存在付费专区。
    • 但在我的情况下,它甚至在使用 API 之前就要求提供账单信息。
    • 抱歉,我引用错误。对,那是正确的。他们完全需要它,但除非您打破此请求限制,否则他们实际上不会向您收费。它被保留为一种保险单,以防您的请求激增超过他们知道他们能够向您收费的限制。没有这个,任何人都可以创建多个帐户并继续使用超过最大免费请求的免费地图。
    猜你喜欢
    • 2017-09-05
    • 1970-01-01
    • 2012-12-05
    • 1970-01-01
    • 1970-01-01
    • 2016-07-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多