javascript - 在表单中使用地理编码自动完成功能，这样用户就不需要输入他们所在的位置

Question

用户将有一个简单的表单，可以在其中输入 3 个地址。第一个地址很可能是他们当前所在的位置。所以我想在它旁边有一个按钮，上面写着“我当前的位置”，它将自动用他们当前的位置填充该输入，但我不完全确定如何去做这个。这是我的表单的代码:

      <div class="main-container z-depth-5">
       <h3 class="txt-primary">Equidestined</h3>
         <p class="home-instructions">Enter two or three addresses to find the optimal meeting spot!</p>
            <%= form_for @search do |search_form| %>
            <% @search.locations.each do |location| %>
              <div class="input-field col s12">
              <%= search_form.fields_for location, index: location.id do |location_form|%>
              <%= location_form.text_field :address %>
               <%= location_form.label :address%>
                <% end %>
              </div>
             <% end %>
            <br><%= submit_tag('Get Midpoint!', :class=>"waves-effect waves-light btn") %>
         <% end %>
         </div>

有人能指出我正确的方向吗？谢谢

Answer 1

您正在寻找的是 HTML 5 的地理定位功能。

https://www.w3schools.com/html/html5_geolocation.asp

请注意，用户可以拒绝此选项，否则浏览器可能不支持它，这将使您的按钮不起作用。如果地理位置可用，最好仅显示该选项(在您的情况下为按钮)。

编辑

Using HTML Geolocation The getCurrentPosition() method is used to return the user's position.

The example below returns the latitude and longitude of the user's position:

示例

var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude; 
}