如何為局部零件創建地圖圖標？

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標簽;-)