ruby-on-rails - 谷歌地图重新加载标记刷新缩放

Question

我一直在关注 gmaps4rails gem，并且能够使用 setinterval 函数重新加载标记。我面临的问题是在每个时间间隔后 map 恢复原状，即如果我放大它会恢复正常。

这是代码

success: (data, jqxhr, status) ->
  console.log('data.bookings', data)
  $('#multi_markers').removeClass('hidden')
  $('.empty_booking_text').removeClass('hidden')
  $('#sidebar_container').html('Please click any booking marker on the map')
  markers_from_api = data.bookings
  handler = Gmaps.build('Google')
  settings = {
    internal: {
      id: 'multi_markers'
    },
    provider:{
      styles: mapStyles
    }
  }
  handler.buildMap settings, ->
    markers = handler.addMarkers(markers_from_api)
    _.each markers,(marker, j) ->
      google.maps.event.addListener marker.serviceObject, 'click', (object) ->
        console.log marker.serviceObject.position.lng()
        render_marker_data markers_from_api[j].id
        return
    handler.bounds.extendWith markers
    handler.fitMapToBounds()
  setInterval () ->
    $ -> update_marker_data(handler)
  , 10000

每 10 秒我更新一次标记

update_marker_data = (handler) ->
  markers = []
  $.ajax '/technician_locations/current_location',
    type: 'GET'
    success: (data, jqxhr, status) ->
      # handler.removeMarkers()
      console.log(data)
      tech_markers_from_api = data.technician_locations
      tech_markers = handler.addMarkers(tech_markers_from_api)
      _.each tech_markers,(marker, j) ->
        markers.push(marker)
        # google.maps.event.addListener marker.serviceObject, 'click', (object) ->
        #   render_marker_data tech_markers_from_api[j].id
        #   return
      # handler.bounds.extendWith tech_markers
      setInterval () ->
        $ -> remove_marker(markers)
      , 9000
      handler.fitMapToBounds()

Answer 1

您可以引用此 thread 获取代码示例。您只需要使用 AJAX 将标记替换为 x 间隔。

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