Montrer une déplaçant le marqueur sur la carte

Je suis en train de faire un marqueur de déplacement(pas disparaître et apparaître à nouveau) sur la carte comme un véhicule se déplace sur la route.

J'ai deux valeurs de latLng et je veux déplacer le marqueur entre les deux jusqu'au point suivant est envoyé par le véhicule. Et puis répétez le processus à nouveau.

Ce que j'ai essayé:[Ce n'est pas un moyen très efficace, je sais]

Mon idée était de mettre en œuvre la-dessus en utilisant la technique des points ci-dessous:

1) Tracer une ligne entre les deux.

2) Obtenir le latLng de chaque point sur 1/10ème de la fraction de la polyligne.

3) Marquer les 10 points sur la carte avec la polyligne.

Voici mon Code:

var isOpen = false;
var deviceID;
var accountID;
var displayNameOfVehicle;
var maps = {};
var lt_markers = {};
var lt_polyLine = {};
function drawMap(jsonData, mapObj, device, deleteMarker) {
var oldposition = null;
var oldimage = null;
var arrayOflatLng = [];
var lat = jsonData[0].latitude;
var lng = jsonData[0].longitude;
//alert(jsonData[0].imagePath);
var myLatLng = new google.maps.LatLng(lat, lng);
if (deleteMarker == true) {
if (lt_markers["marker" + device] != null) {
oldimage = lt_markers["marker" + device].getIcon().url;
oldposition = lt_markers["marker" + device].getPosition();
lt_markers["marker" + device].setMap(null);
lt_markers["marker" + device] = null;
}
else {
console.log('marker is null');
oldimage = new google.maps.MarkerImage(jsonData[0].imagePath,
null,
null,
new google.maps.Point(5, 17), //(15,27),
new google.maps.Size(30, 30));
oldposition = myLatLng;
}
}
var image = new google.maps.MarkerImage(jsonData[0].imagePath,
null,
null,
new google.maps.Point(5, 17), //(15,27),
new google.maps.Size(30, 30));
lt_markers["marker" + device] = new google.maps.Marker({
position: myLatLng,
icon: image,
title: jsonData[0].address
});
if (oldposition == myLatLng) {
alert('it is same');
lt_markers["marker" + device].setMap(mapObj);
mapObj.panTo(myLatLng);
}
else {
alert('it is not same');
var markMarker = null;
var i = 10;
for (i = 10; i <= 100; i + 10) {
//-------
// setTimeout(function() {
if (markMarker != null) {
markMarker.setMap(null);
markMarker = null;
}
alert('inside the loop');
var intermediatelatlng = mercatorInterpolate(mapObj, oldposition, myLatLng, i / 100);
alert('Intermediate Latlng is :' + intermediatelatlng);
arrayOflatLng.push(intermediatelatlng);
var flightPath = new google.maps.Polyline({
path: arrayOflatLng,
strokeColor: "#FFFFFF",
strokeOpacity: 1.0,
strokeWeight: 1
});
flightPath.setMap(mapObj);
if (i != 100) {
markMarker = new google.maps.Marker({
position: intermediatelatlng,
icon: image,
title: jsonData[0].address,
map: mapObj
});
}
else {
markMarker = new google.maps.Marker({
position: intermediatelatlng,
icon: oldimage,
title: jsonData[0].address,
map: mapObj
});                
}
mapObj.panTo(intermediatelatlng);
//--------
//  }, 1000);
}
}
}
function mercatorInterpolate(map, latLngFrom, latLngTo, fraction) {
//Get projected points
var projection = map.getProjection();
var pointFrom = projection.fromLatLngToPoint(latLngFrom);
var pointTo = projection.fromLatLngToPoint(latLngTo);
//Adjust for lines that cross the 180 meridian
if (Math.abs(pointTo.x - pointFrom.x) > 128) {
if (pointTo.x > pointFrom.x)
pointTo.x -= 256;
else
pointTo.x += 256;
}
//Calculate point between
var x = pointFrom.x + (pointTo.x - pointFrom.x) * fraction;
var y = pointFrom.y + (pointTo.y - pointFrom.y) * fraction;
var pointBetween = new google.maps.Point(x, y);
//Project back to lat/lng
var latLngBetween = projection.fromPointToLatLng(pointBetween);
return latLngBetween;
}

Problèmes Rencontrés:

1) Le marqueur ne s'affiche pas sur la carte car le processus de traçage et de suppression de marqueur est tellement rapide que le marqueur n'est pas visisble sur l'écran. J'ai essayé setTimeOut, et Il ne permet pas à tous.

2) si je permettre le navigateur pour exécuter ce code pour plus de 5 minutes, le navigateur se bloque.

Remarque: La fonction ci-Dessus est appelée à chaque 10 secondes à l'aide de la méthode setInterval.

Ce qui Peut être une meilleure solution? S'Il Vous Plaît Aider..

Animation marqueur arbitraires polyligne (à partir de XML); animation marqueur le long d'une polyligne à partir de DirectionsService
quel est le problème avec l'aide d'une fonction de rappel trop dessiner un marqueur sur chaque point que vous avez interpolés? Si vous dessinez un marqueur; dans le prochain cycle de la supprimer; et mettre un marqueur sur la prochaine calculé latlng...
Grâce GeocodeZip..! Permettez-moi de l'essayer une fois.!
Thomas, Pouvez-vous expliquer le callabck mécanisme dans un code?
Vous faites une fonction de rappel (cherchez requestAnimationFrame et de la fonction setTimeout). Cette fonction est qu'il va être appelé toutes les x ms. C'est la fréquence d'images de votre animation. À l'intérieur de la fonction de rappel vous ajoutez un nouveau marqueur et supprimer l'ancien.

OriginalL'auteur writeToBhuwan | 2013-05-02