通過軌道中的ajax更改地圖標記

我有一個搜索頁面，其中顯示了一側的列表以及它們在其他地圖上的位置。所以現在顯示多個標記..但現在我改變了搜索使用ajax。現在列表正常顯示。但是我無法使標記正常工作。有人可以告訴我如何通過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>

來源

2015-12-18 Abhilash

必須重新使用新數據清新地圖，清除所有標記：markers[i].setMap(null);（有關https://developers.google.com/maps/documentation/javascript/examples/marker-remove的更多信息，並使用新數據重新創建標記數組，就像以前一樣。

來源

2015-12-18 20:03:22 Leito

我創建了一個標記數組，並將標記推送到該數組以便稍後移除。但作爲它在視圖文件中，我怎麼能從search.js.erb中刪除它？ – Abhilash

保留對該數組（舊標記）的引用或找到將它們從地圖中拉出的方法。將它們的映射設置爲空（清除映射），然後使用_search.js.erb_上提供的數據創建新的標記數組。「所需的」是什麼意思？ – Leito

這是我的錯誤..sorry..will現在試試這個..我仍然無法弄清楚如何重新運行search.js.erb我的search.html.erb中的初始化方法.. – Abhilash

通過軌道中的ajax更改地圖標記

回答

相關問題