Link_to标签显示地图模态Rails 5

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}网址的基本链接。

要使用链接打开引导模式，请执行以下操作：

<%= 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">×</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" %>
创建一个远程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

我在面对模态时遇到了同样的问题，

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

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

Link_to标签显示地图模态Rails 5

问题描述投票：4回答：4

4个回答

最新问题

Link_to标签显示地图模态Rails 5

问题描述 投票：4回答：4

4个回答

最新问题

问题描述投票：4回答：4