Как установить позицию (перемещение) с помощью нескольких маркеров на Google Maps
Я реализовал следующий код на одном маркере, и он отлично работает. Но у меня проблемы при использовании более одного маркера. Маркер не двигается плавно. Кто-нибудь когда-нибудь сталкивался с подобным случаем?
Я использую ajax для получения последней версии API широты и долготы от третьих лиц.
Ниже приведен исходный код, который я настроил (для одного маркера), я получил ссылку отсюда:
<script type="text/javascript">
var car_icon = 'car.gif';
var numDeltas = 100;
var delay = 10; //milliseconds
var iteration = 0;
var position = [];
var deltaLat,deltaLng, html_popup, map, date_popup, time_popup, bearing, posistion_description, registration;
function get_first_coordinat(){
$.ajax({
url: "ajax.php?id=10",
type: 'GET',
dataType: 'JSON',
cache: false,
success: function(res) {
if(res.status){
position[0] = parseFloat(res.latitude);
position[1] = parseFloat(res.longitude);
reload_api(res);
} else {
console.log(res);
}
}
});
}
//Load google map
google.maps.event.addDomListener(window, 'load', get_first_coordinat);
function initialize(res) {
var latlng = new google.maps.LatLng(position[0], position[1]);
posistion_description = res.posistion_description;
registration = res.registration;
bearing = res.bearing;
date_popup = (res.event_ts).substr(8, 2) + '/' + (res.event_ts).substr(5, 2) +'/'+(res.event_ts).substr(0, 4);
time_popup = (res.event_ts).substr(11, 5);
html_popup = '<table>'+
'<tr>'+
'<td><b>'+(registration)+'</b></td>'+
'</tr>'+
'<tr>'+
'<td><b>'+(posistion_description)+'</b></td>'+
'</tr>'+
'<tr>'+
'<td>'+
'<span class="status" style="background:'+(res.vehicle_status_color)+';">'+(res.vehicle_status).toUpperCase()+'</span>'+ '<b> '+time_popup+' - '+date_popup+'</b>'
'</td>'+
'</tr>'+
'<tr>'+
'<td>'+
'<b></b>'
'</td>'+
'</tr>'+
'</table>';
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
marker = new google.maps.Marker({
position: latlng,
map: map,
title: (res.registration),
icon:car_icon,
});
var infowindow = new google.maps.InfoWindow({
content:''
});
bindInfoWindow(marker, map, infowindow, html_popup);
}
// TRANSITION
function transition(res){
iteration = 0;
deltaLat = (res.latitude - position[0])/numDeltas;
deltaLng = (res.longitude - position[1])/numDeltas;
// SET VARIABEL UNTUK POPUP
posistion_description = res.posistion_description;
bearing = parseInt(res.bearing);
registration = res.registration;
vehicle_status_color = res.vehicle_status_color;
vehicle_status = res.vehicle_status;
date_popup = (res.event_ts).substr(8, 2) + '/' + (res.event_ts).substr(5, 2) +'/'+(res.event_ts).substr(0, 4);
time_popup = (res.event_ts).substr(11, 5);
html_popup = '<table>'+
'<tr>'+
'<td><b>'+(registration)+'</b></td>'+
'</tr>'+
'<tr>'+
'<td><b>'+(posistion_description)+'</b></td>'+
'</tr>'+
'<tr>'+
'<td>'+
'<span class="status" style="background:'+(vehicle_status_color)+';">'+(vehicle_status).toUpperCase()+'</span>'+ '<b> '+time_popup+' - '+date_popup+'</b>'
'</td>'+
'</tr>'+
'<tr>'+
'<td>'+
'<b></b>'
'</td>'+
'</tr>'+
'</table>';
moveMarker();
}
// MOVE MARKER
function moveMarker(){
position[0] += deltaLat;
position[1] += deltaLng;
var latlng = new google.maps.LatLng(position[0], position[1]);
marker.setTitle(registration+" - "+posistion_description);
marker.setPosition(latlng);
if(iteration!=numDeltas){
iteration++;
setTimeout("moveMarker()", delay);
}
}
// POPUP WINDOW
function bindInfoWindow(marker, map, infowindow, html_popup) {
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(html_popup);
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent(html_popup);
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
}
// RELOAD API
var no = 1;
function reload_api(result){
if(no == 1){
initialize(result);
} else {
$.ajax({
url: "ajax.php?id=10",
type: 'GET',
dataType: 'JSON',
cache: false,
success: function(res) {
if(res.status){
transition(res);
} else {
console.log(res);
}
}
});
}
no++;
// SET INTERVAL API
setTimeout(reload_api, 5000);
}
</script>