如何在postgres表中为使用html5地图的用户保存用户的经度和纬度?

How would I go about saving a users latitude and longitude in my postgres table for a user using the html5 map?

本文关键字：用户地图保存经度纬度 html5 postgres 更新时间：2023-09-26

所以我们要做的是一旦用户点击他/她想要保存他们的位置我们将它保存到经度和纬度列。谢谢你的帮助和照顾我们!

https://github.com/rolaandoes/nexu/tree/dev

保存用户位置(经度，纬度)的html文件

 <h1>Users#edit for <%= @user.id %></h1>
    <p>Find me in app/views/users/edit.html.erb</p>
    <p><button onclick="geoFindMe()" data-id="<%= @user.id %>"id="finder-    btn">Geo-Coordnate My Position</button>Send Coordinates to DB</p>
<div id="out"></div>
    <h2>Coordinates to DataBase!</br>lat, lon</h2>
    <a href="#" onclick="this.style.backgroundColor='#990000'">Paint it red</a>

这是我们的js文件

$(function(){
  $('#finder-btn').on('click', function (){
    var currentUserId = $(this).attr('data-id')
    $.ajax({
      url: '/users/' + currentUserId,
      data: { latitude: LatLng[0], longitude: LatLng[1] },
      type: 'get',
      success: function(data) {
        console.log("Patch Succesful!")
      },
      error: function(err) {
        console.log("Error Thrown")
      }
    });
  });
});

//update location for current_user
        LatLng = [];
        console.log(LatLng);
       var latitude = LatLng[0]
       var longitude = LatLng[1]

function geoFindMe() {
  var output = document.getElementById("out");
  if (!navigator.geolocation){
    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
    return;
  }
  function success(position) {
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;

    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
    var img = new Image();
    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";
    // console.log(longitude);
    // console.log(latitude);
    //PLUCK into Location TABLE
    // latitude = lat_Jon;
    // longitude = lon_Jon;
    LatLng.push(latitude);
    LatLng.push(longitude);

    output.appendChild(img);
  };
  function error() {
    output.innerHTML = "Unable to retrieve your location";
  };
  output.innerHTML = "<p>Locating…</p>";
  navigator.geolocation.getCurrentPosition(success, error);
}

我们的users_controller，我们需要更新我们表中的位置为纬度和经度

def update
    # @user = User.find(session[:user_id])
    user_id = current_user.id
    @user = User.find(user_id)
    @user.update_attributes(user_params)
    puts @user.latitude
  end

这里发生的一些事情可能会给您带来麻烦。

您正在做GET而不是POST或PUT来尝试更新用户的纬度和经度。

尝试将AJAX调用从type: 'get'更改为type: 'post'，这将帮助Rails确定将请求路由到哪个控制器动作(您想要的是users_controller#update
在您的users_controller中，使用params[:id]查找用户，代码看起来像:
user = User.find(params[:user_id])
与找到用户的方式相同，您需要解析lat和lout参数。您的user_params方法正在对您实际上没有执行的参数进行假设。如果你的数据看起来像:
{ 'user': { 'longitude': '29.388', 'latitude': '187.39848' } }
但是你的参数看起来像:
{ 'longitude': '29.388', 'latitude': '182.3888' }
所以你需要做同样的事情，使用params[:longitude]和params[:latitude]
我会这样写:
```
class UsersController < ApplicationController
  def update
    user = User.find(params[:id])
    user.update!(latitude: params[:latitude], longitude: params[:longitude])
  end
end
```