Question

我在google 3.1上使用google maps api v3和Ruby。我有以下型号：

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);
 }

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

1 个答案: