javascript - 如何使用 Ruby on Rails 将带有经纬度的标记保存到 mysql 数据库中

Question

我将 google maps api v3 与 Ruby on rails 3.1 结合使用。我有以下模型:

class Business < ActiveRecord::Base
  attr_accessible :business_name, :address, :city_id,
                  :latitude, :longitude, :zipcode

我对业务的部分展示观点如下:

%style{:type => "text/css"}
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }

%script{:type => "text/javascript",
        :src => "http://maps.googleapis.com/maps/api/js?v=3.6&sensor=false"}

%script{:type => "text/javascript"}
  function initialize() {

  var latlng = new google.maps.LatLng(#{@business.latitude}, #{@business.longitude});

  var myOptions = {
  zoom: 12,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var contentString = "#{@business.business_name}"

  var infowindow = new google.maps.InfoWindow({
  content: contentString
  });


  var marker = new google.maps.Marker({
  position: latlng,
  draggable:true,
  animation: google.maps.Animation.DROP,
  title:"#{@business.business_name}"
  });

  // To add the marker to the map, call setMap();
  marker.setMap(map);

  google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
  });

  google.maps.event.addListener(marker, 'dragend', function() { 
  var latitude = marker.getPosition().lat();
  var longitude = marker.getPosition().lng();
    // use Ajax to save latitude, longitude  in the database
}


  }
  google.maps.event.addDomListener(window, 'load', initialize);

%div#map_canvas{:style => "width:500px; height:350px"}

我可以拖放标记，但我仍然无法将新位置保存在数据库中(mysql 2.8.1)。我发现了一些 javascript(请参阅 var latitude = marker.getPosition().lat(); 周围的行)，但由于我的 javascript 知识很差，所以我不知道如何在数据库中保存新的标记位置。理想情况下，我希望在我的信息窗口中有一个“保存”链接，以确认将新的纬度和经度存储到数据库中。

有人知道怎么做吗？非常感谢您的帮助!

Answer 1

您可以将数据传输到 ajax 表单:

<%= form_for @marker, :remote => true, :html => { :multipart => true } do |f| %>
  <%= f.hidden_field :lat, :id => "lat" %>
  <%= f.hidden_field :lng, :id => "lng" %>
  <%= f.submit "save marker" %>
<% end %>

在你的js中添加:

var lat = $("#lat");
var lng = $("#lng");

var set_latlng_to_input = function(marker){
  lat.val(marker.getPosition().lat());
  lng.val(marker.getPosition().lng());
}

您现在必须在 google.maps.event.addListener 中调用此函数:

 google.maps.event.addListener(marker, 'click', function() {
   infowindow.open(map,marker);
   set_latlng_to_input(marker);
 });

 google.maps.event.addListener(marker, 'dragend', function() { 
   set_latlng_to_input(marker);
 }