javascript - gmaps4rails - 在不刷新页面的情况下动态更新 map 上数据库中的标记

Question

您好，我正在构建实时公交车跟踪 Rails 应用程序。我使用 gmaps4rails gem 在 Rails 4 中的 Google map 上很好地显示了数据库中的标记。

Controller :

@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 秒动态更新标记在 map 上的位置？

Answer 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。