自动检测位置（城市和州），并将该信息分别放入输入和选择字段

Posted 2023-02-23

【中文标题】自动检测位置（城市和州），并将该信息分别放入输入和选择字段

【英文标题】：Auto detect location (city & state), and put that information into input and select fields, respectively

【发布时间】：2017-06-26 14:35:49

【问题描述】：

我一直在研究 Geolocation API 以及 jQuery Geolocation API，但还没有找到一个很好的解决方案来解决我正在尝试做的事情。

最终，我希望用户能够点击城市位置输入中的图标，浏览器检测他们的城市和州，然后该信息自动填充到字段中，城市字段是基本输入和状态是一个选择。

<div class="search">
  <a href="autodetect-here"><span class="fa fa-map-marker"></span></a>
  <input type="text" id="location" placeholder="City" />
  <select>

<option selected="state">State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>

【问题讨论】：

您发布的代码缺少您的尝试。您尝试了哪些方法，但以什么方式不起作用？

所以你想要一个用来选择州，然后系统找出他们的城市，还是有一个与上述代码分开的按钮，可以同时选择州和代码？

我还在尝试。因为我在陌生的领域，所以我所做的一切都没有接近。 fa-map-marker 图标是我想用来触发地理定位的。

@ChrisOwens：那么看来你在这里问得有点过早了。作为一般经验法则，当问“我如何做 X？”时在 Stack Overflow 上，答案通常是查看 X 的文档和示例。我们不寻求替换现有的文档/教程/等。在大多数情况下，您会发现问题在您尝试后很容易解决。一旦您进行了一些尝试，如果仍然有问题（您不理解的错误消息、特定操作中的意外结果等），那么我们可以提供帮助。

是的，我也这么认为。抱歉，但我正在寻找方向而不是有人为我做这件事，我得到了。一旦我有一些工作，我会更新，以便这篇文章对那些将来可能会发现它的人有一些价值。

【参考方案1】：

使用 html5 地理定位 API 获取经度和纬度，然后将这些坐标发送到 API，例如 Google 的地理编码 API。这将为您返回一个地址，您可以从中解析城市和州。

HTML5 Geolocation

Google geocoding API

注意：从 Chrome 50 开始，Geolocation API 只能在安全的情况下工作 HTTPS 等上下文。如果您的网站托管在非安全源上 （例如 HTTP）获取用户位置的请求将不再 功能。