在表单中使用地理编码自动完成功能，因此用户无需键入它们的位置

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

请注意，用户可以拒绝此选项，或者浏览器可能不支持此选项，这会使您的按钮无法正常工作。如果地理位置可用，最好只显示选项（在您的情况下为按钮）。

修改

  

使用HTML Geolocation getCurrentPosition（）方法用于   返回用户的位置。

     

以下示例返回用户的纬度和经度   位置：

实施例

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; 
}