Link_to标签显示地图模态Rails 5 [英] Link_to tag to display map modal Rails 5

查看：115 发布时间：2018/5/11 14:08:54 javascript ruby-on-rails google-maps ruby-on-rails-5

本文介绍了Link_to标签显示地图模态Rails 5的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当我点击一个地图标记时，一个模式弹出如下：

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

以下是我为该页面处理的代码：

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 
}）
 
结束
结束
 
 def收藏
 @ 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，'搜索结果'）％> 
 
< 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 =sideBarclass =pre-scrollable> 
< h2><％= @ count％>找到结果< / h2> 
< br> 
 <％@ maps.each do | map | ％GT; 
< 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'返回主地图'，maps_path％> 
< / div> 
< div id =map_wrapper> 
< div id =mapstyle ='width：100％; height：100％;'>< / div> 
< / div> 
 
< / div> 
 
 
 
 < div class =modal-dialog> 
 
 <！ - 基本表格 - > 
< div class =panel panel-green margin-bottom-40> 
< div class =panel-heading>

现在，当我点击某个链接时，我会将其重定向到链接，其中没有任何地图标识（见地址）：

如果有人可以引导我会非常感激。

更新1

当我使用建议的答案时，获取模态弹出窗口。目标是让模态给我提供与我点击地图标记相同的信息（请参阅第一张图）。当我最初点击搜索结果编号时，我得到以下内容：

$ b $然而，当我点击一个地图标记时，当我点击结果链接时弹出一个地图标记，每弹出一个模式将显示弹出的最后一个地图标记模式的信息，这意味着模态看起来是正确的在第一张图片中，它只是搜索结果中每个链接的相同模式。

更新2

我认为我的问题是，这些链接不是地图标记，因此写入的JavaScript不适用于它们。我如何使链接与地图标记相同，以便将信息传输到模式中。

更新3

我试图建议拉出功能，并onclick到目前为止，我已经是这个，它不工作或我。

 <％= link_to map.number，＃，data：{toggle：modal，target：#myModal}，：html => {：onclick => 'initialize（）'}％>

解决方案

目前您有这样的链接：

<％= link_to map.number，controller：maps，action：show，id：map.id％>

这是创建到您的/ maps / {id} url的基本链接。

 
 
 要用链接打开引导模式，请执行以下操作： 
 
 
 <％= link_to map.number，＃，data：{toggle： modal，target：#myModal}％>  
 
 
 
 
 
 更新： / p> 
 
 
首先，您的 initialize 函数已经显示了带有 $（'＃myModal'）的模态.modal（'show'）这样你就可以摆脱数据：{toggle：modal，target：#myModal}  。
 $ b 接下来，你的 initialize 函数需要传递给它的特定地图标记元素，所以我建议这样做： 
 
 
 <％= link_to map.number，＃，class：map-marker-link，data：{ elem：map}％ >  
 
 
 然后在您的javascript中： <$ c （$（this）.data（'elem'））; $ c> $（。map-marker-link）。click（function（event）{
 initialize 
 event.preventDefault（）; 
}）; 
  
 
When I click on a map marker a modal pops up as such:



I just implemented a search feature and am trying to get it when I click on a result a modal with all the information will pop up just like in the photo.



Here is the code I am working with for that page:

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
Here is my code for my search result page:
<% 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>
Right now when I click on a link I get redirected to the link with a map id which is nothing (see address) for example:



If someone can guide me it would be greatly appreciated.

Update 1

When I use the suggested answer I was given I do get a modal pop-up. The goal is to get the modal to give me the same information as if I clicked on a map marker (see first image). When I initially click on the search result number I get the following:



However, when I click on a map marker and its modal pops up when I click on the results links each modal that pops up will show the information for the last map marker modal that popped up, meaning the modal looks correct as in the first image its just it is the same modal for each link in the search results.

Update 2

I think what my problem is, is that those links are not map markers thus the javascript written does not apply to them. How can I have the links act the same as the map markers so the information gets transferred over to the modal.

Update 3

I am trying as suggested to pull the function out and onclick to call it so far I have is this and its not working or me.
<%= link_to map.number, "#", data: {toggle: "modal", target: "#myModal"}, :html => {:onclick => 'initialize()' } %>

 解决方案 
Currently you have your link like this:

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

That's creating basic links that go to your /maps/{id} url.

To open a bootstrap modal with a link, do:

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



Update:

First, your initialize function already displays the modal with $('#myModal').modal('show') so you can get rid of the data: {toggle: "modal", target: "#myModal"} from the links.

Next, your initialize function needs the specific map marker element passed into it, so I suggest doing this:

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

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


                        
这篇关于Link_to标签显示地图模态Rails 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！


                    
                        查看全文

Link_to标签显示地图模态Rails 5 [英] Link_to tag to display map modal Rails 5

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

Link_to标签显示地图模态Rails 5 [英] Link_to tag to display map modal Rails 5

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭