在表单中使用地理编码自动完成,这样用户就不需要输入他们所在的位置
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;
}
用户将有一个简单的表格,他们可以在其中输入 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;
}