将 HTML5 地理位置传递给控制器答案

【问题标题】：Pass HTML5 geolocation to the controller将 HTML5 地理位置传递给控制器
【发布时间】：2016-09-12 17:18:50
【问题描述】：

我想使用 HTML5 Geolocation 获取用户的坐标并将它们发送到辅助方法。地理编码器 gem 不是一个选项，因为 IP 地理定位对于我的应用程序来说不够准确。

这可能吗？我正在使用 coffeescript 和 slim-lang

我的辅助方法，位于 application_helper.rb：

  def get_station(location)
    type = not relevant
    key = not relevant
    radius = 5000
    url = "https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=#{location}&radius=#{radius}&type=#{type}&key=#{key}"
    data = JSON.load(open(url))["results"][0]["name"]
  end

我认为的咖啡脚本部分（.slim 模板）：

  set_location = ->
    if (navigator.geolocation)
      navigator.geolocation.getCurrentPosition(setLocation);

  setLocation = (position) ->
    coords = position.coords.latitude + ", " + position.coords.longitude;

发帖前我查看过的主题：

【问题讨论】：

标签： ruby-on-rails ajax html view geolocation

【解决方案1】：

您不能在此处使用 Rails 辅助方法。

服务器端渲染在脚本发送给用户之前完成。所以即使你使用插值<%= get_station(location) %> 也会返回错误的结果。

navigator.geolocation.getCurrentPosition 是异步的 - 在用户允许地理定位之前，实际上不会调用回调。而是让客户端将 ajax 请求发送到 google maps API：

setLocation = (position) ->
  uri = 'https://maps.googleapis.com/maps/api/place/nearbysearch/json'
  promise = $.ajax(uri,
    dataType: 'json'
    data:
      location: position.coords.latitude + ', ' + position.coords.longitude
      type: 'hindu_temple'
      radius: 5000
      key: 'Your google maps key'
  promise.done (data)->
    console.log(data)

【讨论】：

是的，我应该提到我已经尝试过了，但没有设法提出这个请求，因为它是跨域的，而且解决这个问题的所有方法都不起作用。我打开了一个关于那个的不同线程......
然后设置你的 Rails 应用来代理请求。你需要一个控制器动作和一个路由——而不是一个助手。但是，如果您不能向谷歌地图 API 发出跨域请求，那么您就做错了——它会发送 CORS 标头。
你能再解释一下吗？这是我关于 CORS 的问题stackoverflow.com/questions/37255085/…

【解决方案2】：

它本身并不能完全回答问题，但它确实是我首先需要使用 AJAX 和控制器方法来做的。它成功地将 LAT、LNG 参数从 HTML5 Geolocation 传递到控制器方法。

控制器：

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))
        results = []
        data["results"].each do |result|
          results.push({ "name":result["name"], "vicinity":result["vicinity"], "lat":result["geometry"]["location"]["lat"], "lng":result["geometry"]["location"]["lng"] })
        end
        render json: { :data => results, :lat => lat, :lng => lng }
      }
    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)
            });
        });
    }
  }

【讨论】：