3

こんにちは私はライブバストラッキングレールアプリを構築しています。 gmaps4rails gemを使ってGoogle Map in Rails 4のデータベースからマーカを表示しました。gmaps4rails - ページを更新せずに地図上のデータベースからマーカーを動的に更新

コントローラー:

@hash = Gmaps4rails.build_markers(@vehicle_trackings) do |track, marker| 
     marker.lat track.latitude 
     marker.lng track.longitude 
     marker.picture({ 
     url: "/images/Bus Filled-30.png", 
     width: 50, 
     height: 50 
    }) 
    end 

ビュー:

<div id='map' style='width: 100%; height: 500px;'></div> 
    <script> 
     handler = Gmaps.build('Google'); 

      handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){ 
       markers = handler.addMarkers(<%=raw @hash.to_json %>); 
       handler.bounds.extendWith(markers); 
       handler.fitMapToBounds(); 
      }); 
    </script> 

今、データベースからページを更新せずに動的にマップ上のマーカーの位置を15秒ごとに更新する方法?

+0

あなたはAJAX + 'setTimeout()'でcoordsハッシュを取得しようとしましたか? – Kkulikovskis

+0

はい。地図を更新するだけです。マーカーは移動されません。 @Kkulikovskis –

答えて

1
<script> 
    handler = Gmaps.build('Google'); 
     handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){ 
      markers = handler.addMarkers(<%=raw @hash.to_json %>); 
      handler.bounds.extendWith(markers); 
      $(document).ready(function() {   
      setInterval(function(){ 
       $(function() { 
        $.ajax({ 
         type:"GET", 
         url:"/path_to_controller_action", 
         dataType:"json", 
         data: {some_id:1}, 
         success:function(result){      
         for (var i = 0; i < markers.length; i++) { 
          markers[i].setMap(null); 
          handler.removeMarkers(markers); 
         } 
         markers = []; 
         markers = handler.addMarkers(result); 
         handler.bounds.extendWith(markers);       
         } 
        }) 
       }); 
       }, 10000); 
      handler.fitMapToBounds(); 
      handler.getMap().setZoom(17);  
      });    
     }); 
</script> 

マーカーは、私のために働いたajaxを使ってx intervelで置き換えてください。

+0

毎分リフレッシュする必要はありません。しかし、新しい検索クエリで地図を更新したいのですが? – Whitecat

関連する問題