更新谷歌地圖標記位置

Question

方案：從下拉列表中選擇城市，獲取針對該城市的用戶並顯示其位置。

現在我卡住的部分是用戶位置每兩分鐘更新一次。

如何在每兩分鐘後更新地圖上的標記位置。

首先我初始化了地圖。

var map; 
function initialize() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 2, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

在選擇改變Ajax請求獲得位置基於城市，並告訴他們在地圖上。成功後，我獲得位置和將該位置指定給一個陣列，然後將該陣列傳遞給position: new google.maps.LatLng(positions[i].lat, positions[i].lng),。哪個工作正常。

$(document).ready(function() { 
    $('.selectCity').change(function() { 
    var city = $(this).val(); 
    $.ajax({ 
     type: 'GET', 
     url: '/riders/location/track', 
     data: { 
     'city': city 
     }, 
     success: function (data) { 
     var positions = []; 
     $.each(data.riders, function(index, value) { 
      positions.push({ 
       lat: value.rider_location.lat, 
       lng: value.rider_location.lng, 
       content: value.name 
      }); 
     }); 
     map.setCenter({ 
      lat: parseInt(positions[0].lat), 
      lng: parseInt(positions[0].lng) 
     }); 
     var infowindow = new google.maps.InfoWindow(); 
     var marker, 
     i; 
     for (i = 0; i < positions.length; i++) { 
      marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(positions[i].lat, positions[i].lng), 
      map: map, 
      }); 
      google.maps.event.addListener(marker, 'click', (function (marker, i) { 
      return function() { 
       infowindow.setContent(positions[i].content); 
       infowindow.open(map, marker); 
      } 
      }) (marker, i)); 
     } 
     } 
    }); 
    }); 
}); 

如何，我可以每兩分鐘後，在地圖上只更新標記的位置。因爲數據庫中的位置每兩分鐘更新一次。

Answer 1

假設你腳本的其餘部分工作，我重新調整了一下;現在它可以隨時隨地調用。讓我知道這是否工作

function updateMarkers() { 
    var city = $('.selectCity').val(); // we do not have 'this' available anymore 
    $.ajax({ 
     type: 'GET', 
     url: '/riders/location/track', 
     data: { 
      'city': city 
     }, 
     success: function(data) { 
      var positions = []; 
      $.each(data.riders, function(index, value) { 
       positions.push({ 
        lat: value.rider_location.lat, 
        lng: value.rider_location.lng, 
        content: value.name 
       }); 
      }); 
      map.setCenter({ 
       lat: parseInt(positions[0].lat), 
       lng: parseInt(positions[0].lng) 
      }); 
      var infowindow = new google.maps.InfoWindow(); 
      var marker, 
       i; 
      for (i = 0; i < positions.length; i++) { 
       marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(positions[i].lat, positions[i].lng), 
        map: map, 
       }); 
       google.maps.event.addListener(marker, 'click', (function(marker, i) { 
        return function() { 
         infowindow.setContent(positions[i].content); 
         infowindow.open(map, marker); 
        } 
       })(marker, i)); 
      } 
     } 
    }); 

} 
var my_timer = null; 
$(document).ready(function() { 
    $('.selectCity').change(function() { 
     // var city = $(this).val(); 
     updateMarkers(); 
     clearInterval(my_timer); // this cancels the previous interval 
     my_timer = setInterval(function() { updateMarkers(); }, 120000); 
    }); 
    my_timer = setInterval(function() { updateMarkers(); }, 120000); 
});