google map reload marker erfrischt den Zoom

Question

Ich habe den gmaps4rails gem verfolgt und konnte den Marker mit der setinterval Funktion neu laden. Das Problem, dem ich gegenüberstehe, ist, dass nach jedem Intervall die Karte wieder zum Original zurückkehrt, d. h. wenn ich gezoomt bin, geht es wieder normal.

Dies ist der Code

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 

alle 10 Sek ich den Marker aktualisieren

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

Mit diesem thread für den Codebeispiel beziehen. Sie müssen nur die Markierungen mit x-Intervall ersetzen, indem Sie AJAX verwenden.

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