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

更新谷歌地图标记位置

1 个答案: