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

use geocode autocomplete in a form so users don't need to type in where they are

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

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

谁能指出我正确的方向?谢谢

您正在寻找的是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; 
}