通过轨道

Question

我有一个搜索页面，其中一侧显示列表，另一侧显示他们在地图上的位置。所以现在显示多个标记..但现在我改变搜索使用ajax。现在列表正确显示。但我无法使标记生效。有人能告诉我如何通过ajax更新标记？ 提前谢谢??

search.html.erb

    <div class="row">
      <div class="col-md-4 hidden-xs">

        <div id="sidebar">
          <div id="widget" class="sticky">
            <script>
              function initialize() {
                var mapCanvas = document.getElementById('widget');
                var mapOptions = {
                  <% if @arrRooms.length > 0 %>
                  center: new google.maps.LatLng(<%= @arrRooms[0].latitude %>, <%= @arrRooms[0].longitude %>),
                  <% else %>
                  center: new google.maps.LatLng(44.5403, -78.5463),
                  <% end %>
                  zoom: 14,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                var map = new google.maps.Map(mapCanvas, mapOptions)

                <% @arrRooms.each do |room| %>

                var marker = new MarkerWithLabel({
                  position: new google.maps.LatLng(<%= room.latitude %>, <%= room.longitude %>),
                  title: "RoomDuck",
                  labelContent: "<%= room.price %>",
                  map: map,
                  labelAnchor: new google.maps.Point(20, 43),
                  labelClass: "labels", // the CSS class for the label
                  labelInBackground: false,
                  icon: pinSymbol('red')
                });
                marker.setMap(map);
                <% end %>
              }
              google.maps.event.addDomListener(window, 'load', initialize);
              function pinSymbol(color) {
                return {
                  path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
                  fillColor: color,
                  fillOpacity: 1,
                  strokeColor: '#000',
                  strokeWeight: 1,
                  scale: 1
                };
              }

            </script>
          </div>
        </div>
      </div>
 <div class="col-md-8">
        <div class="row">
          <div class="col-md-12">
            <hr>
            <div id="listings">
              <%= render 'pages/listings' %>
            </div>
          </div>

        </div>
      </div>

search.js.erb

$("#listings").html("<%= j render("pages/rooms") %>")

_rooms.html.erb

<div class="row">
  <div class="col-md-4">Sort By:</div>
  <div class="col-md-4 ajax_link"><%= sort_link @search, :price, "Price"%></div>
  <div class="col-md-4 ajax_link"><%= sort_link @search, :distance, "Distance"%></div>
</div>
<hr>
<div class="row">
  <% @arrRooms.each do |room| %>

      <div class="col-md-6">
        <div class="panel panel-default custom-hover">
          <%= link_to room do %>
              <div class="panel-heading preview">
                <%= image_tag room.photos[0].image_url(:original), style: "width: 100%" %>
              </div>
              <div class="panel-body custom-line-control text-center">
                <%= room.listing_name %><br>
              </div>
          <% end %>
        </div>
      </div>

  <% end %>
</div>

Answer 1

您必须使用新数据刷新地图，清除所有标记：markers[i].setMap(null);（有关https://developers.google.com/maps/documentation/javascript/examples/marker-remove的更多信息，并使用新数据重新创建标记数组，就像之前一样。< / p>