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..
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
Vous devez vous connecter pour publier un commentaire.
Pour le marqueur à déplacer relativement bien, vous avez besoin de
Par exemple, quelque chose comme:
J'ai fait un exemple simple au http://jsfiddle.net/bmSbU/2/ qui montre un marqueur se déplaçant le long d'une trajectoire rectiligne. Si c'est ce que vous voulez, en plus de votre code ci-dessus quant à l'emplacement le long de la ligne peuvent être réutilisés (ou découvrez http://broady.github.io/maps-examples/points-along-line/along-directions.html )
Les liens sont cassés 🙁
Pourriez-vous s'il vous plaît partager la mise à jour de violon en lien à la fois comme les liens sont brisés?
S'il vous plaît, pourriez-vous s'il vous plaît partager le lien à jouer du violon? est en baisse..
S'il vous plaît re-up les liens morts.
OriginalL'auteur jlivni
Vous pouvez utiliser le marqueur d'animation discrète de la bibliothèque pour faire des marqueurs
transition d'un lieu à un autre (au lieu de réapparaître).
Vous pourriez initialiser votre marqueur comme ça:
Appelez simplement marqueur.setPosition() chaque fois qu'un nouveau véhicule de coordonnées de l'arrivée.
P. S. je suis l'auteur de la bibliothèque.
Aucune idée de comment nous pouvons jouer/mettre en pause l'animation?
Vous pouvez régler la durée de l'animation à 0. Cette technique permettra de désactiver l'animation.
Si vous voulez que votre véhicule juste pour arrêter le milieu de l'animation, vous pouvez appeler le marqueur.setPosition(marqueur.getAnimationPosition()). Ceci permettra de définir l'animation à destination actuelle visible, de l'arrêter.
ses une bonne bibliothèque. Qu'avez-vous utiliser pour animer le marqueur? Avez-vous réglé la position du marqueur à l'aide de la setPosition() la méthode, supprimer ou créer de nouveaux repères pour l'animation?
OriginalL'auteur viskin
Pourquoi ne pas conserver le Marqueur/MarkerImage et appel setPosition() pour le déplacer, soit sur une minuterie ou les changements de position?
Supprimer & recréant c'est ce qu'il provoque à flash/flicker et finit par se bloquer. Si vous garder le même exemple, mais il suffit de déplacer, vous devez faire beaucoup mieux.
Voir: Marqueur.setPosition()
https://developers.google.com/maps/documentation/javascript/reference#Marker
OriginalL'auteur Thomas W
Faire d'animation en déplaçant le marqueur sur la carte Google à l'aide de javascript et peut être voir sur Youtube.com
OriginalL'auteur Tell Me How
Essayez avec ce Lien..
Au premier abord ajouter deux marqueurs au 2 endroits que vous avez.
Vous pouvez ensuite créer une animation entre les 2 points avec le code dans la Lien
OriginalL'auteur Pravin Kumar