Question

用户可以发布'通知'，并在用户/ show.html.erb的“通知Feed”中显示这些通知。每个通知都有一个：纬度和一个：经度以及谷歌地图上的相关标记。

当用户将鼠标悬停在Feed中的通知上时，我正在尝试使标记更改颜色。我通过marker.json({ id: notice.id })给了标记与通知相同的ID。在通知部分中，每个通知都由其ID <li id="notice-<%= notice.id %>">唯一标识。问题是从通知部分中访问“标记”。我想使用代码markers[<%= notice.id %>]但是如何将show javascript中的'markers'传递给部分javascript？

或者，我可以在show javascript中完成所有操作，但问题仍然存在：如何从show javascript中访问通知ID？

Users_controller.rb：

def show
  @notice = @character.notices.build
  @notice_feed_items = current_user.notice_feed.paginate(page: params[:notices_page])
  @hash = Gmaps4rails.build_markers(@notice_feed_items) do |notice, marker|
    marker.lat        notice.latitude
    marker.lng        notice.longitude
    marker.infowindow notice.content
    marker.json({ id: notice.id })
  end
  redirect_to root_url and return unless @user.activated
end

用户/显示/ html.erb：

<% if @notice_feed_items.any? %>
  <ol class="posts">
    <%= render @notice_feed_items %>
  </ol>
  <%= will_paginate @notice_feed_items, param_name: 'notices_page' %>
<% end %>

<script type="text/javascript">
  handler = Gmaps.build('Google');
  handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
    markers = handler.addMarkers(<%=raw @hash.to_json %>);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
    map = handler.getMap();
    var update_timeout = null;
    google.maps.event.addListener(map, 'click', function(event){
      update_timeout = setTimeout(function(){
        placeMarker(event.latLng);
        fillInForm(event.latLng);
        document.getElementById("dropfield").focus();
      }, 300);
    });
    google.maps.event.addListener(map, 'dblclick', function(event) {       
      clearTimeout(update_timeout);
    });
  });
  function placeMarker(latLng) {
    var marker = new google.maps.Marker({
      position: latLng, 
      map: map,
      draggable: false
    });
  }
  function fillInForm(latLng) {
    $('#notice_latitude').val(latLng.lat());
    $('#notice_longitude').val(latLng.lng());
  }
</script>

_notice.html.erb：

<li id="notice-<%= notice.id %>">
  .
  .
  .
</li>
<script type="text/javascript">
  document.getElementById("notice-<%= notice.id %>").onmouseover=function(){
    markers[<%= notice.id %>].setIcon("markers/blue_MarkerA.png");
  }
  document.getElementById("notice-<%= notice.id %>").onmouseout=function(){
    markers[<%= notice.id %>].setIcon("markers/yellow_MarkerA.png");
  }
</script>

编辑：

我正在尝试使用以下代码在show.html.erb中完成所有操作来解决问题，使用grep：

<script type="text/javascript">
  handler = Gmaps.build('Google');
  handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
    markers = handler.addMarkers(<%=raw @hash.to_json %>);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
    map = handler.getMap();
    var update_timeout = null;
    google.maps.event.addListener(map, 'click', function(event){
      update_timeout = setTimeout(function(){
        placeMarker(event.latLng);
        fillInForm(event.latLng);
        document.getElementById("dropfield").focus();
      }, 300);
    });
    google.maps.event.addListener(map, 'dblclick', function(event) {       
      clearTimeout(update_timeout);
    });
  });
  function placeMarker(latLng) {
    var marker = new google.maps.Marker({
      position: latLng, 
      map: map,
      draggable: false
    });
  }
  function fillInForm(latLng) {
    $('#notice_latitude').val(latLng.lat());
    $('#notice_longitude').val(latLng.lng());
  }
  $("#notice_list li").on('mouseenter', function(){
      var id = $(this).attr('id');
      $.grep(markers, function(m){return m.id == id;})[0].setIcon("markers/blue_MarkerA.png");
  }).on('mouseleave', function(){
      var id=$(this).attr('id');
      $.grep(markers, function(m){return m.id == id;})[0].setIcon("markers/yellow_MarkerA.png");   
  }); 
</script>

......但它不起作用。我认为问题是尝试使用m.id访问标记中每个标记的ID不起作用。我试图打印出markers[0].id，但没有任何反应，似乎您无法使用markers[0].id访问标记ID？！（我检查过markers.length不是零。它不是 - 地图上满是标记）。

那么，如果markers[0].id不起作用，你如何访问标记元素的id？

Answer 1

标记没有id属性。要获得每个标记的引用，可以使用markers数组的索引（每个标记添加一个标记）。

# pseudocode

<% @notice_feed_items.each do |item| %>
  markers[<%= item.id %>] = handler.addMarker(<%=raw item.to_json %>);
<% end %>

Rails，gmaps4rails：从partial中访问javascript变量

1 个答案: