Question

当我将地图上的标记拖动到新位置时，单击标记后，将显示一个信息窗口，其中包含以下属性：email，：latitude，：longitude inside。如何使用新位置的信息自动设置这些属性（纬度和经度），以便我只需填写：email并单击Submit？这是我的代码（不完整）。

google.maps.event.addListener(testMarker, 'dragend', function(evt) {
        var testContent = '<%= form_for @newlazystreeter, :url => { :action => "create" }, :html => {:class => "nifty_form"} do |f| %>'+
            '<%= f.text_field :email %><br>'+
            '<%= f.text_field :latitude %><br>'+
            '<%= f.text_field :longitude %><br>'+
            '<%= f.submit "Submit!" %>'+
            '<% end %>';
        var infowindow = new google.maps.InfoWindow({
            content: testContent
        });
        infowindow.open(map,testMarker);
    });

Answer 1

我认为，将表单代码分开会更好，因为在某些情况下，rails会生成多行，并且从html到javascript的转换将无效。

所以，首先要将表单添加到DOM并将其隐藏在一个不可见的div中：我还添加了一些id以便更容易找到后面的这些元素（形式，纬度和经度）

<div style="display:none">
  <%= form_for @newlazystreeter, :url => { :action => "create" }, :html => {:class => "nifty_form", :id => "info_window_form"} do |f| %>
    <%= f.text_field :email %><br>
    <%= f.text_field :latitude, :id => 'latitude_field' %><br>
    <%= f.text_field :longitude, :id => 'longitude_field' %><br>
    <%= f.submit "Submit!" %>
  <% end %>
 </div>

使用表单元素作为内容选项创建信息窗口：

var infowindow = new google.maps.InfoWindow({
  content: document.getElementById('info_window_form'),
});

这是我真正回答你问题的地方。最后，您必须将所需的行为添加到标记中。您打开infowindow并更新纬度和经度的表格值。

google.maps.event.addListener(testMarker, 'dragend', function(evt) {
  document.getElementById('latitude_field').value = testMarker.position.lat();
  document.getElementById('longitude_field').value = testMarker.position.lng();
  infowindow.open(map,testMarker);
});

我建议再做一件事：在拖动标记时隐藏此infowindow。

google.maps.event.addListener(testMarker, 'dragstart', function(evt) {
  infowindow.close();
});

请记住在DOMContentLoaded触发的侦听器上添加此javascript代码，以确保找到每个html ID。

document.addEventListener('DOMContentLoaded', function () {
  // add here javascript code to load map and all this stuff above
}, false);

这应该运行良好。

将Google地图位置数据传递给Rails表单？

1 个答案: