在 Rails 中，如何将 link_to 与谷歌地图一起使用来创建可点击的链接？答案

【问题标题】：In Rails how do I use link_to with google maps to create a clickable link?在 Rails 中，如何将 link_to 与谷歌地图一起使用来创建可点击的链接？
【发布时间】：2018-02-03 22:01:57
【问题描述】：

我正在使用 rails 页面进行测试，在该页面中我会搜索检索不同房间的过滤器。现在房间的 infoWindow 只显示价格，但这不是我需要做的。

我想让 infoWindow 中的代码可点击以将我带到那个房间页面。我该怎么做？

这是我的java脚本代码

var marker, inforwindow;

        <% @arrRooms.each do |room| %>
          marker = new google.maps.Marker({
            position: {lat: <%= room.latitude %>, lng: <%= room.longitude %>},
            map: map
          });

          inforwindow = new google.maps.InfoWindow({
            content: "<div class='map_price'>$ " + <%=room.price%> + "</div>"


          });
          inforwindow.open(map, marker);
        <% end %>

它尝试了不同的方法来包含 link_to，但我不知道如何正确实现。

我们非常感谢您的帮助和指导。

【问题讨论】：

标签： javascript ruby-on-rails google-maps

【解决方案1】：

当您在 javascript 段中使用 ERB 时，请使用 escape_javascript 助手：http://api.rubyonrails.org/classes/ActionView/Helpers/JavaScriptHelper.html#method-i-escape_javascript

例子：

var marker, inforwindow, windowContent;

<% @arrRooms.each do |room| %>
  marker = new google.maps.Marker({
    position: {lat: <%= room.latitude %>, lng: <%= room.longitude %>},
    map: map
  });

  windowContent = "<div class='map_price'>$<%= escape_javascript room.price %></div>";
  windowContent += "<div><%= escape_javascript link_to('Room Details', room) %></div>";

  inforwindow = new google.maps.InfoWindow({
    content: windowContent
  });
  inforwindow.open(map, marker);
<% end %>

【讨论】：

肖恩非常感谢您回答我的求助！您的代码有效，但有一个小时间，因为我不得不从第一个 windowContent var 分配中删除 escape_javascript，所以它是： windowContent = "
$
" ;而且效果很好
我有一个后续问题，关于推进我的代码以在 JS 中利用 AJAX 以避免无聊的重新加载...我将代码放在这里 gist.github.com/albaqawi/62c36de64c3e51b21edceb1f8b78fd4d 第 14 - 30 行之间是我的 For 循环的重点我的问题。如何以更健壮的方式编写此行 #23 以避免像 localhost 这样的服务器路径？我的代码在没有开发箱的情况下运行良好。这就是为什么我喜欢使用像 link_to 这样的内置助手
是的，您不需要对这样的 URL 进行硬编码。由于您使用的是 ERB，因此您可以使用 link_to 和路径助手。例如：windowContent += "<%= link_to(room.listing_name, room_path(room) %>";。将 room_path 替换为您的节目列表路径的任何路径助手。
嗨，肖恩，即使在添加 ) 后进行小修正...我收到以下错误：未定义的局部变量或方法 `room' for #:0x007f93237e75a8> 你有吗意思是？ room_url room_path rooms_url @rooms ......有什么想法吗？我确实喜欢让它充满活力，但似乎没有发生。
您如何接受这个答案并提出一个单独的 STO 问题（将链接发送给我）并发布您的新代码。我在想您要么使用了错误的助手，要么在 @arrRooms.each 循环之外调用它。

【解决方案2】：

这行得通吗？

    <% @arrRooms.each do |room| %>
      marker = new google.maps.Marker({
        position: {lat: <%= room.latitude %>, lng: <%= room.longitude %>},
        map: map
      });

      inforwindow = new google.maps.InfoWindow({
        content: "<div class='map_price'>$ " + <%=room.price%> + "</div><a href='"+ <%= room_path(room) %> +"'></a>"


      });
      inforwindow.open(map, marker);
    <% end %>

【讨论】：

可悲的是，我什至认为这听起来不错，我什至之前尝试过，但谷歌地图也没有出现任何内容

【解决方案3】：

你可以试试！

变量标记，信息窗口；

    <% @arrRooms.each do |room| %>
      marker = new google.maps.Marker({
        position: {lat: <%= room.latitude %>, lng: <%= room.longitude %>},
        map: map
      });

      inforwindow = new google.maps.InfoWindow({
        content: "<a href=/rooms/"+room.id+">" + <%=room.price%> + "</a>"


      });
      inforwindow.open(map, marker);
    <% end %>

【讨论】：