繁体   English   中英

gmaps4rails - 动态更新地图上数据库中的标记而不刷新页面

[英]gmaps4rails - update dynamically the markers from the database on the map without refresh the page

您好我建立实时总线跟踪Rails应用程序。 我使用gmaps4rails gem在Rails 4中的Google Map上的数据库中显示了我的标记。

控制器:

@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秒动态更新标记在地图上的位置而不刷新数据库中的页面?

<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替换标记。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM