Question

我一直在查看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>

Answer 1

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

HTML5 Geolocation

Google geocoding API

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

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

1 个答案: