如何为局部创建地图图标？

Question

我有一个记录列表，显示为屏幕一侧的部分内容，可以进行过滤。在另一边，我有一张手绘地图，它是一个带有背景图像的 div。如何为地图上的每条记录添加一个图标，该图标仅在显示部分记录时显示？

索引页面如下所示：

<div class="map_container">
</div>

<div class="filter_options_container">
  filter form stuff is here
</div>

<div class="venue_partials_container">
  <%= render :partial => 'venue', :collection => @venues %>
  <div class="clearall"></div>

  <%= will_paginate @venues %>

  <div class="venue_partial_button">
    <%= link_to 'add a new venue', new_venue_path %>
  </div>
</div>

<div class="clearall"></div>

感谢您的帮助。

Answer 1

您需要向场地对象添加一些方法或以某种方式更改渲染方法...好吧，只需在每个场地输出一些 javascript 数据，如下所示：

<script type="text/javascript"><!--
data.push({
  x: <%= this.x %>,
  y: <%= this.y %>,
  someOtherStuff: <%= this.stuff %>
});
--></script>

然后添加一个函数，它将迭代该数据数组：

function insertIconOnMap(mapItem){
  var img = $("<img>", {
    'class': "mapIcon",
    'src': mapItem.someOtherStuff
  }).css({
    'left': mapItem.x,
    'top': mapItem.y
  });
  $("#map").append(img);
}
data.each(insertIconOnMap);

以及一些css之类的

#map { position: relative; }
#map .mapIcon { position: absolute; }

如果你想要以更优雅的方式...我忘记了我所知道的关于Ruby的一切:-D 是你为你的问题添加了 javascript 标签;-)