簡體   English   中英

Link_to標簽顯示地圖模態Rails 5

[英]Link_to tag to display map modal 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
                  })     

    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()' } %>

目前,您的鏈接如下:

<%= 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函數需要傳遞給它的特定map標記元素,所以我建議這樣做:

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

然后在你的JavaScript中:

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

如果我得到你的問題然后重點是,你需要在點擊鏈接后顯示地圖模態嗎?

如果是,則按照步驟操作

  1. 在布局文件夾_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> 
  2. 在您的地圖文件夾中創建部分_show.html.erb

     <div id="map_wrapper"> <div id="map" style='width: 100%; height: 100%;'></div> </div> #=> with js script 
  3. 在您的地圖文件夾中創建部分show.js.erb

     $modal = $('.modal'), $modalBody = $('.modal .modal-body'), $modalHeading = $('.modal .modal-title'); $modalHeading.html("Map"); $modalBody.html('<%= escape_javascript(render("show")) %>'); $modal.modal(); 
  4. 在下面的結果頁面上渲染模態部分

     <%= render partial: "../path/modal" %> 
  5. 創建一個遠程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.erbshow.js.erb

非常仔細地實現這個

希望能幫到你!

我通常使用服務器端Javascript處理這些。 試試這個:

  1. 在您的鏈接中添加data-remote =“true”:

     <%= link_to map.number, controller: "maps", action: "show", id: map.id, data: { remote: true } %> 
  2. 在您的控制器上,添加一個JS響應

     def show @maps = Map.find(params[:id]) respond_to :js end 
  3. 創建要呈現的新視圖文件。 應該叫做'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代碼。

我在面對模態時遇到了同樣的問題,

您的地圖已經存在,但是當您打開如下所示的模態時,您必須觸發調整地圖的大小:

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM