一个使用 HTML5 地理位置获取用户位置并保存到数据库的 Rails 应用程序

Posted 2023-03-05

【中文标题】一个使用 HTML5 地理位置获取用户位置并保存到数据库的 Rails 应用程序

【英文标题】：A rails app which gets users location using HTML5 geolocation and saves to data base

【发布时间】：2013-07-16 08:39:02

【问题描述】：

看起来很简单，但我很挣扎。

这是我目前所看到的。 我显示位置坐标只是为了测试它的工作。 但我也想坚持数据库，因此 ajax 调用。 我这样做是正确的方式还是有更简单或更好的方法？

<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script>
    var x=document.getElementById("demo");
    var lat;
    var long;
    function getLocation()
    
        if (navigator.geolocation)
        
            navigator.geolocation.getCurrentPosition(showPosition);

        
        elsex.innerhtml="Geolocation is not supported by this browser.";
    
    function showPosition(position)
    
        lat = position.coords.latitude;
        long = position.coords.longitude;
        x.innerHTML="Latitude: " + lat +
                "<br>Longitude: " + long;

        $.ajax(
            type: 'POST',
            url: 'http://localhost:3000/locations',
            data:  lat: lat, long: long ,
            contentType: 'application/json',
            dataType: 'json'

        );
    
</script>

【参考方案1】：

您可以尝试一种“更简单”的方法，使用geocoder gem，它提供了多种方法来获取用户位置，其中一种是通过请求。

request.location.city => Medellin
request.location.country => Colombia

您可以在以下链接中找到有用的信息

Railscast

Official WebPage

GitHub

【讨论】：

它是一个伟大的宝石并且非常有用 - 但是它远没有 HTML5 地理定位那么准确。不过，它是一个很好的后备方案。

【参考方案2】：

查看this answer。基本上，只需通过 cookie 设置地理位置，然后从控制器中的 cookie 中读取纬度和经度。

【参考方案3】：

我是这样做的：

控制器：

def location
    respond_to do |format|
      format.json 
        lat = params["lat"]
        lng = params["lng"]
        radius = 5000
        type = "restraunt"
        key = "-"
        url = "https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=#lat,#lng&radius=#radius&types=#type&key=#key"
        data = JSON.load(open(url))
        render json:  :data => data 
      
    end
  end

routes.rb:

get "/location" => "application#location"

查看：

function getLocation()
    if (navigator.geolocation) 
        navigator.geolocation.getCurrentPosition(function (position)
          $.ajax(
            type: 'GET',
            url: '/location',
            data:  lat: position.coords.latitude, lng: position.coords.longitude ,
            contentType: 'application/json',
            dataType: 'json'
            ).done(function(data)
               console.log(data)
            );
        );