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 回答