个人中心
gpt4 book ai didi

javascript - 在 Ruby On Rails 中获取纬度和经度

转载 作者：行者123 更新时间：2023-12-01 00:50:36 28 4
gpt4 key购买 nike

在 JavaScript 中，我可以轻松获取当前的纬度和经度坐标，并且我正在尝试在 Ruby On Rails 中实现它

在 Javascript 中，我可以使用以下代码来获取当前的纬度和经度。 

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

在 Rails 中，我可以使用以下命令获取当前的 IP 地址

Net::HTTP.get(URI.parse('http://checkip.amazonaws.com/')).squish

但是，我无法将其转换为纬度和经度，

Javascript 方法请求用户允许使用他们当前的位置，这对于我所面临的场景来说是理想的。我意识到有一些 gem 可以解决这个问题，但是我需要它在 localhost 上工作，而 javascript 方法可以做到这一点。

最佳答案

geocoder gem 不适用于本地主机。如果在生产中使用它，它只能给出近似结果。

前端向后端发送ajax请求可以获得更精确的结果。

示例: enter image description here 

<!-- application.html.erb -->
<!DOCTYPE html>
<html>
  <head>
    <%= javascript_include_tag 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js' %>
    <%= javascript_include_tag 'https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.0/noty.js' %>
    <%= stylesheet_link_tag 'https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.0/noty.min.css' %>

    <script>
      // It's bad to write inline javascript. To be moved into separate .js file
      $(function() {
        Noty.overrideDefaults({ theme: 'relax', layout: 'topCenter' });

        $('.getLocation').click(function(e) {
          event.preventDefault();

          if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
              $('.latInput').val(position.coords.latitude);
              $('.longInput').val(position.coords.longitude);

              new Noty({
                text: "Got location",
                type: "success"
              }).show();
            }, function(position) {
              new Noty({
                text: "Could not get location",
                type: "error"
              }).show();
            });
          } else {
            new Noty({
              text: "Geolocation is not supported by this browser.",
              type: "error"
            }).show();
          }
        });

        $('.resetLocation').click(function(e) {
          event.preventDefault();

          $('.latInput').val('');
          $('.longInput').val('');
        });

        $('.submitAjax').click(function(e) {
          event.preventDefault();

          var lat = $('.latInput').val();
          var long = $('.longInput').val();
          if (lat && long) {
            $.ajax({
              url: "/",
              data: {
                lat: lat,
                long: long
              }
            }).done(function() {
              new Noty({
                text: "Data was successfully submitted to server via AJAX",
                type: "success"
              }).show();
            }).fail(function() {
              new Noty({
                text: "Couldn't send data",
                type: "error"
              }).show();
            });
          } else {
            new Noty({
              text: "Click on 'Get Location' button first",
              type: "error"
            }).show();
          }
        });

        $('.clearAndSubmit').click(function(e) {
          $('.latInput').val('');
          $('.longInput').val('');
        });
      });
    </script>
  </head>
  <body>
    <%
      ip = request.remote_ip
      ip = '8.8.8.8' if ip.in?(["::1", "127.0.0.1"])
    %>
    Geocoder.search(ip):
    <br />
    <textarea cols="50" rows="10"><%= Geocoder.search(ip) %></textarea>
    <hr />
    <% if params[:lat].present? && params[:long].present? %>
      Form was submitted:
      <br />
      Lat: <%= params[:lat] %>
      <br />
      Long: <%= params[:lat] %>
    <% else %>
      Form was not submitted
    <% end %>
    <br />
    <br />
    <%= form_tag '/', method: :get do |f| %>
      <button class="getLocation">Get Location</button>
      &nbsp;
      <button class="resetLocation">Reset Location</button>
      <br />
      <br />
      <%= label_tag :lat, 'Lat:' %>
      <%= text_field_tag :lat, params[:lat], class: 'latInput' %>      
      <%= label_tag :long, 'Long:' %>
      <%= text_field_tag :long, params[:long], class: 'longInput' %>      
      <br />
      <br />
      <button class="submitAjax">Submit location to server via ajax</button>      
      <br />
      <br />
      <%= submit_tag "Submit location to server via form submit" %>
      <br />
      <br />
      <button class="clearAndSubmit">Clear form and submit</button>      
    <% end %>
  </body>
</html>
# application_controller.rb
class ApplicationController < ActionController::Base
  before_action do
    # Implemented before_action for demonstration purposes. Should be moved into action.

    if params[:lat].present? && params[:long].present?
      Rails.logger.info(['Received lat&long from AJAX request', {lat: params[:lat], long: params[:long]}])
      # current_user.lat = params[:lat]
      # current_user.lat = params[:lng]
      # current_user.save!
    end
  end
end
# gemfile.rb
#...
gem 'geocoder'

关于javascript - 在 Ruby On Rails 中获取纬度和经度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57014588/

28 4 0
文章推荐： python - 如何防止 tkinter canvas 的子窗口跨过 Canvas 滚动条
文章推荐： performance - Apache Storm : Relation between Executors , 执行延迟和进程延迟？
文章推荐： python - 添加一段 True : to a file that gets live stock data every 5 seconds in Python
文章推荐： javascript - 在javascript中的光标位置插入图像 - 显示 [object HTMLImageElement] 而不是图像
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com