1

当我将地图上的标记拖到新位置时，单击标记后会出现一个信息窗口，其中包含以下属性：电子邮件、纬度、经度。如何使用新位置的信息自动设置这些属性（纬度和经度），以便我只需填写：电子邮件并单击提交？这是我的代码（不完整）。

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

1 回答 1

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

这里是我真正回答你问题的地方。最后，您必须将您想要的行为添加到标记中。您打开信息窗口并更新纬度和经度的表单值。

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

我建议再做一件事：在拖动标记时隐藏此信息窗口。

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

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

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

这应该运行良好。

于 2012-05-25T04:34:36.217 回答