Link_to标签显示地图模态Rails 5
当我点击地图标记时，会弹出一个模态：
我刚刚实现了一个搜索function，当我点击一个结果时，我试图获得它，所有信息的模态将像照片一样弹出。
这是我正在为该页面使用的代码：
MapsController：
class MapsController 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 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
这是我的搜索结果页面的代码：
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 = ; 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("
"+number+"
") $(".paneltb").html("
| Panel | Location | Tab ID | Zip Code | Latitude | Longitude |
|---|
| "+number+" | "+ name + " | "+tabid+" | "+zipcode+" | "+latitude+" | "+longitude+" |
") 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: "", 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: "", width: 48, height: 48 } }); handler.map.centerOn(marker2); handler.getMap().setZoom(10); }; initialize();
现在，当我点击一个链接时，我被重定向到一个地图ID没有的地址ID（见地址），例如：
如果有人可以指导我，我将不胜感激。
更新1
当我使用建议的答案时，我得到了一个模态弹出窗口。 目标是让模态给我相同的信息，就像我点击地图标记一样（见第一张图片）。 当我最初点击搜索结果编号时，我得到以下内容：
但是，当我单击地图标记并且当我单击结果链接时弹出其模态时，弹出的每个模态将显示弹出的最后一个地图标记模态的信息，这意味着模态看起来像第一个图像中一样它只是搜索结果中每个链接的模态。
更新2
我认为我的问题是，这些链接不是地图标记，因此编写的javascript不适用于它们。 如何使链接的行为与地图标记相同，以便将信息转移到模态。
更新3
我正在尝试将该function拉出来并onclick来调用它到目前为止我有这个，它不起作用或我。
{: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"} %>
更新：
首先，你的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(); });
如果我得到你的问题然后重点是，你需要在点击链接后显示地图模态吗？
如果是，则按照步骤操作
-
在布局文件夹_modal.html.erb创建一个部分模态到任何视图文件夹更好
-
在您的地图文件夹中创建部分_show.html.erb
#=> 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
非常仔细地实现这个
希望能帮到你！
我通常使用服务器端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代码。
我在面对模态时遇到了同样的问题，
您的地图已经存在，但是当您打开如下所示的模态时，您必须触发调整地图的大小：
google.maps.event.trigger(map, "resize")