通过地理编码和绘图在地图上跟踪Rails中的车辆

时间:2014-09-23 22:08:34

标签: ruby-on-rails-3 google-maps gps geolocation geocoding

我有一个Rails 3.2.19应用程序,我想在Google地图上使用地理编码和绘图来跟踪车辆(单位)。

我提出了一种通过使用taip_parser gem获取坐标并创建一个持续侦听入站taip数据的rake任务,解析纬度和经度并更新车辆模型的latitudelongitude个字段。从那里我可以使用gmaps4rails宝石绘制车辆位置。这种情况的局限性在于您必须使用在TAIP中说话的特定3G / 4G调制解调器将lat / long发送到Rails服务器,以便rake任务可以解析它。

我想做的是否定必须使用这些昂贵的3G / 4G调制解调器,而是从位于车辆(目前是iPad)的移动设备中拉出坐标。

所以我的想法是使用浏览器中的HTML5地理定位功能来获取单元的纬度和经度,并以某种方式将其存储到当前通过Ajax发生的页面/部分刷新时单元的纬度/经度数据库字段中。

这将打破对现有设备的依赖,并允许任何支持GPS的移动设备与此功能兼容。

目前在我的应用程序中,我有gmaps4rails使用我的rake任务和taip数据解析来绘制单位,以及geocoder我正在测试地址编码地址,因为它们是为了其他目的而创建的。 / p>

我的问题是:

有人可以提供如何在rails视图中使用HTML5地理定位功能的示例吗?在视图中启用HTML5地理定位后,如何将纬度和经度输入相应模型的纬度和经度字段?也许使用gmaps4rails

迭代多个对象的纬度经度

如果我的问题太模糊或令人费解,请告诉我,以便我可以对其进行编辑,并使我更加清楚我要做的事情。

1 个答案:

答案 0 :(得分:4)

我能够通过在我的Rails应用程序中使用一些ajax和自定义控制器操作来实现此功能。使用Ajax和隐藏表单,我使用HTML5拉取坐标,使用值填充表单,然后使用ajax post提交。

请参阅下面的代码:

<强>控制器

  def update_gps
    @unit = current_user.unit
    if @unit.update_attributes(params[:unit])
      respond_to do |format|
        format.html {redirect_to mdt_path}
        format.js { render "index"}
      end
    end
  end

<强> index.html.erb

 <div class="hidden">
    <%= form_for(@unit, :url => update_gps_mdt_index_path, :html => {:method => :post}) do |f| %>
    <%= f.text_field :latitude %>
    <%= f.text_field :longitude %>
    <%= f.button :submit %>
    <% end %>
    </div>
    <script>
      $(function() {
        setInterval(function(){
          $.getScript("/mdt");
        }, 10000);
      });

    function updateCurrentLocation(){
      navigator.geolocation.getCurrentPosition(function(position) {
      var c = position.coords
      var location = c.latitude +", "+ c.longitude
      console.log(location)
      var $updateLocationForm = $(".edit_unit")
      $("#unit_latitude").val(c.latitude)
      $("#unit_longitude").val( c.longitude)
      var data = $(".edit_unit").serialize();
    console.log(data)
    $.ajax({
    type: "POST",
    url: $(".edit_unit").attr("action"),
    data: data,
    success: function(data) {
    console.log('working: '+data);
    },
    error: function(msg) {
    console.log('not working '+msg);
    }
    });
    });
    }
    setInterval(updateCurrentLocation, 10000)
    </script>
相关问题