1

マップ上のマーカーを新しい位置にドラッグすると、マーカーをクリックすると、情報ウィンドウが表示され、属性:email、:latitude、:longitude の形式が表示されます。これらの属性 (緯度と経度) を新しい位置の情報で自動的に設定する方法は? これは私のコードです（不完全）。

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

場合によってはレールが複数の行を生成し、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);
});

もう 1 つお勧めします。マーカーをドラッグしている間は、この情報ウィンドウを非表示にします。

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

DOMContentLoadedすべての html ID が確実に見つかるように、トリガーされたリスナーにこの JavaScript コードを追加することを忘れないでください。

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

これはうまく動作するはずです。

于 2012-05-25T04:34:36.217 に答える