Question

当我点击地图标记时，会弹出一个模态：

我刚刚实现了一个搜索功能，当我点击一个结果时，我试图获取它，所有信息都会弹出，就像在照片中一样。

以下是我为该页面使用的代码：

MapsController：

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.json({:id => map.id,
            :number => map.number,
            :name => map.name,
            :tabid => map.tabid,
            :zipcode => map.zipcode,
            :latitude => map.latitude,
            :longitude => map.longitude
                  })     

    end
  end

  def favorite 
    @map = Map.new(:number => 'Favorite Site')
    @map.save
    redirect_to :back
    flash[:success] = "favorited"
  end



  def show
   @maps = Map.find(params[:id])

end
end

SearchController：

class SearchController < ApplicationController
  def index
    if params[:query].present?
     @maps = Map.search(params[:query]).with_pg_search_highlight
     @count = @maps.pluck(:id).count


     @hash = Gmaps4rails.build_markers(@maps) do |map, marker|
      marker.lat map.latitude
      marker.lng map.longitude
       marker.json({:id => map.id,
            :number => map.number,
            :name => map.name,
            :tabid => map.tabid,
            :zipcode => map.zipcode,
            :latitude => map.latitude,
            :longitude => map.longitude
                  })         



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

以下是我的搜索结果页面的代码：

<% provide(:page_title, 'Search Results') %>

<script src="//maps.google.com/maps/api/js?key=AIzaSyAxwNVY12NVNEbrnPorhkHRe7V0_xU8xHM&libraries=places"></script>

<% content_for :scripts %>
<%= javascript_include_tag 'creative/marker_cluster.js', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'creative/infobox_packed.js', 'data-turbolinks-track': 'reload' %>

<div class="main">

<div id="sideBar" class="pre-scrollable">
      <h2><%= @count%> results found </h2>
      <br>
  <% @maps.each do |map| %>
      <div>
        <div class="" id="map_<%= map.id %>">

        <h4>
          <%= link_to map.number, controller: "maps", action: "show", id: map.id %>
        </h4>


        <hr>

        </div>
      </div>
    <% end %>
    <%= link_to 'Return to Main Map', maps_path %>
 </div> 
 <div id="map_wrapper">
    <div id="map" style='width: 100%; height: 100%;'></div>
   </div>

</div>



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

          <!--Basic Table-->
          <div class="panel panel-green margin-bottom-40">
            <div class="panel-heading">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
              <div class = "name"></div>
            </div>
            <div class="panel-body">

                  <div id="map2" style='width: 568px; height: 365px;'>

                  </div>

                <div class="row">
    <div class="col-sm-12 text-center">



              </div>
              </div>
            </div>
            <table class="table paneltb">


            </table>

          </div>
          <!--End Basic Table-->
  </div>
</div>

 <script type = "text/javascript">
var handler = Gmaps.build('Google', {
         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}
              ]}}
      });

var current;
function initialize(){
  handler.buildMap({ internal: {id: 'map'} }, function() {

    markers_json = <%=raw @hash.to_json %>;
    markers = _.map(markers_json, function(marker_json){
      marker = handler.addMarker(marker_json);
      handler.fitMapToBounds();
      _.extend(marker, marker_json);
      return marker;
    });

    getLocation();



    markers.map(function(elem, index) {

      google.maps.event.addListener(elem.getServiceObject(), "click", function(evt) {
        var id = elem.id,
            number = elem.number,
            name = elem.name,
            zipcode = elem.zipcode,
            tabid = elem.tabid,
            latitude = elem.latitude,
            longitude = elem.longitude



         $(".name").html("<h3 class='panel-title'><i class='fa fa-id-card'></i>"+number+"</h3>")
         $(".paneltb").html("<thead><tr><th>Panel</th><th>Location</th><th>Tab ID</th><th>Zip Code</th><th>Latitude</th><th>Longitude</th></tr></thead><tbody><tr><td>"+number+"</td><td>"+ name + "</td><td>"+tabid+"</td><td>"+zipcode+"</td><td>"+latitude+"</td><td>"+longitude+"</td></tr></tbody>")


        pos = new google.maps.LatLng( latitude, longitude );
        var div = document.getElementById('map2');
        var sv = new google.maps.StreetViewPanorama(div);



        sv.setPosition( pos );
        sv.setVisible( true );

        // find the heading by looking from the google car pos to the venue pos
        var service = new google.maps.StreetViewService();
        service.getPanoramaByLocation( pos, 50, function(result, status) {
            if (status == google.maps.StreetViewStatus.OK) 
            {   
                carPos = result.location.latLng;
                heading = google.maps.geometry.spherical.computeHeading( carPos, pos );
                sv.setPov( { heading: heading, pitch: 0, zoom: 0 } );
            }
        })

        $('#myModal').modal('show')

          current = elem;

      $("#myModal").on("shown.bs.modal", function () {
    google.maps.event.trigger(sv, "resize");
});  

        });









    })
  });
    // Create the search box and link it to the UI element.


}
function getLocation(){
  if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(displayOnMap);
  }
  else{
    navigator.geolocation.getCurrentPosition(displayOnMapError);
  }
};
function displayOnMap(position){

  marker2 = handler.addMarker({
    lat: position.coords.latitude,
    lng: position.coords.longitude,
    picture: {
        url: "<%= asset_path 'creative/1499326997_Untitled-2-01.png' %>",
        width:  48,
        height: 48
        },
    infowindow:  "You are Here!"
  });
  handler.map.centerOn(marker2);
  handler.getMap().setZoom(10);
};

function displayOnMapError(position){

  marker2 = handler.addMarker({
    lat: 34.0522,
    lng: -118.2437,
    picture: {
        url: "<%= asset_path 'creative/1499326997_Untitled-2-01.png' %>",
        width:  48,
        height: 48
        }
  });
  handler.map.centerOn(marker2);
  handler.getMap().setZoom(10);
};




initialize();


</script>

现在当我点击某个链接时，我会被重定向到一个地图ID的链接，这个地图ID没什么（见地址），例如：

如果有人可以指导我，我们将不胜感激。

更新1

当我使用建议的答案时，我得到了一个模态弹出窗口。目标是让模态给我相同的信息，就像我点击地图标记一样（见第一张图片）。当我最初点击搜索结果编号时，我得到以下内容：

然而，当我点击地图标记并且当我点击结果链接时弹出其模态时，弹出的每个模态将显示弹出的最后一个地图标记模态的信息，这意味着模态看起来正确，如第一个图像，它只是搜索结果中每个链接的模态。

更新2

我认为我的问题是，这些链接不是地图标记，因此编写的javascript不适用于它们。如何使链接的行为与地图标记相同，以便将信息转移到模态。

更新3

我正在尝试将该功能拉出来并onclick来调用它到目前为止我有这个并且它不起作用或我。

<%= link_to map.number, "#", data: {toggle: "modal", target: "#myModal"}, :html => {:onclick => 'initialize()' } %>

Answer 1

目前您的链接如下：

<%= link_to map.number, controller: "maps", action: "show", id: map.id %>

这是创建基于/ maps / {id}网址的基本链接。

要打开带链接的bootstrap模式，请执行：

<%= link_to map.number, "#", data: {toggle: "modal", target: "#myModal"} %>

更新

首先，您的initialize函数已经显示了带$('#myModal').modal('show')的模态，因此您可以从链接中删除data: {toggle: "modal", target: "#myModal"}。

接下来，您的initialize函数需要传递给它的特定地图标记元素，所以我建议这样做：

<%= link_to map.number, "#", class: "map-marker-link", data: {elem: map} %>

然后在你的javascript中：

$(".map-marker-link").click(function (event) {
    initialize($(this).data('elem'));
    event.preventDefault();
});

Answer 2

如果我收到您的问题，那么您需要在点击右侧链接后显示地图模式吗？

如果是，请按照步骤

在布局文件夹_modal.html.erb

中更好地为任何视图文件夹创建部分模态

<div class="modal fade my-modal" id="modalOne" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog" role="document">
   <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
        </button>

        <h4 class="modal-title" id="myModalLabel">Map</h4>
    </div>
    <div class="modal-body"></div>
    </div>
  </div>
</div>

在地图文件夹中创建部分_show.html.erb

<div id="map_wrapper">
   <div id="map" style='width: 100%; height: 100%;'></div>
</div>

#=> with js script

在地图文件夹中创建部分show.js.erb

$modal = $('.modal'),
$modalBody = $('.modal .modal-body'),
$modalHeading = $('.modal .modal-title');
$modalHeading.html("Map");
$modalBody.html('<%= escape_javascript(render("show")) %>');
$modal.modal();

在
下面的结果页面上渲染模态部分
```
<%= render partial: "../path/modal" %>
```

使用remote true创建链接

<%= link_to map.number, map_path(map_parameter1, map_parameter2), remote: true, id: map.id %> #=> pass your map parameter with link to the show modal

注意：JS脚本可以使用_show.html.erb或show.js.erb

非常认真地实施这个

希望能帮到你！

Answer 3

我通常使用服务器端Javascript来处理这些问题。试试这个：

在您的链接中添加data-remote =“true”：

<%= link_to map.number, controller: "maps", action: "show", id: map.id, data: { remote: true } %>

在您的控制器上，添加一个JS响应

def show
    @maps = Map.find(params[:id])
    respond_to :js
end

创建要渲染的新视图文件。应该叫做'show.js.erb'，并且位于'app / views / maps /'目录

中

// Javascript code.
// Whatever you write here will be executed

alert("You just clicked on Map <%= @maps.id %>");

您应该写出您在视图文件上编写的javascript以填充模式并显示它。您将能够复制您在原始问题中发布的大部分JS代码。

Answer 4

我在modal上遇到了同样的问题，

您的地图已经存在，但是当您打开如下所示的模式时，您必须触发调整地图的大小：

google.maps.event.trigger(map, "resize")

Link_to标签显示地图模态导轨5

4 个答案: