更新谷歌地图标记位置

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); 
});