单击模态 Gmaps4Rails 中特定标记的显示数据时如何获得每个标记

Question

我希望每当我点击 google 地图中的标记时弹出一个模式。我能够使用 javascript 中的以下脚本代码完成此操作（在我看来）：

handler = Gmaps.build('Google', {
          // builders: {
          //   Marker: InfoBoxBuilder
          // },
           markers:
                  {clusterer: {
                    gridSize: 60,
                    maxZoom: 20,
                    styles: [ {
                      textSize: 10,
                      textColor: '#ff0000',
                      url: 'assets/creative/m1.png',
                      height: 60,
                      width: 60 }
                    , {
                      textSize: 14, 
                      textColor: '#ffff00',
                      url:'assets/creative/m2.png',
                      height: 60,
                      width: 60 }
                    , {
                     textSize: 18, 
                     textColor: '#0000ff',
                     url: 'assets/creative/m3.png',
                     width: 60,
                     height: 60}
                    ]}}
        });

        handler.buildMap({ provider: {}, internal: {id: 'map'}}, function() {
var i, len, marker, results;
markers = handler.addMarkers(<%=raw @hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();

results = [];
for (i = 0, len = markers.length; i < len; i++) {
  marker = markers[i];

  google.maps.event.addListener(marker.getServiceObject(), 'click', function() {
    $('#myModal').modal('show')
    return true;
  });

  results.push(true);

}

return results;

});

在我看来：

 <div id="map" style='width: 100%; height: 900px;'>

    </div>
   <% @maps.each do |map| %>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel"><%= map.number %></h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>

  </div>
</div>
  <% end %>

这是我的控制器：

    class MapsController < ApplicationController
  def index
    @maps = Map.all
     @hash = Gmaps4rails.build_markers(@maps) do |map, marker|
      marker.lat map.latitude
      marker.lng map.longitude
      marker.title map.number
      marker.json({:id => map.id })

      # marker.infowindow render_to_string(:partial => "/maps/info", :locals => { :object => map})
    end


    end

  def import
    Map.import(params[:file])
    redirect_to authors_posts_path, notice: "Locations Imported!"
  end

  def show

  end
end

我遇到的问题是每当我点击一个标记时，模态只显示每个标记的第一个对象的 map.number。我想，当我点击一个标记时，模式中显示的数据仅适用于被点击的标记。

Modal Image with map.number

Answer 1

我会说你有两种方法来解决这个问题。

如果您为每个标记保留一个模态框，则为每个模态框设置不同的 ID。

<div class="modal fade" id="myModal-<%= map.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

在 js 中：

handler.buildMap({ provider: {}, internal: {id: 'map'}}, function() {   
  var i, len, results;
  markers = handler.addMarkers(<%=raw @hash.to_json %>);
  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();

  $.each(markers, function(index, marker) {
    google.maps.event.addListener(marker.getServiceObject(), 'click', function() {
      $('#myModal-' + marker.id).modal('show');
    });
  });
});

或者为所有人准备一个模态并即时填充它：

handler.buildMap({ provider: {}, internal: {id: 'map'}}, function() {
  var i, len, results;
  markers = handler.addMarkers(<%=raw @hash.to_json %>);
  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();

  $.each(markers, function(index, marker) {
    google.maps.event.addListener(marker.getServiceObject(), 'click', function() {
      $('#myModal #myModalLabel').text(marker.title);
      $('#myModal').modal('show');
    });
  });
});

单击模态 Gmaps4Rails 中特定标记的显示数据时如何获得每个标记

How do I have each marker when clicked on show data for its specific marker in the modal- Gmaps4Rails

javascript

google-maps

ruby-on-rails

google-maps-api-3

gmaps4rails