Comment ajouter de la direction sur le suivi de chemin d'accès sur google maps

Montrant la direction sur la polyligne peut être accompli avec des flèches.

Il y a quelques chemins prédéfinis que les cartes google maps api3 fournit.

Voir cette section de la documentation -
SYMBOLES SUR POLYLIGNE, qui peut être utilisée qu'une flèche.

Ont un coup d'oeil à ce violon qui utilise une flèche pour indiquer la direction sur la polyligne.

DÉMO avec un sigle symbole

Vous pouvez également définir la repeat propriété pour le symbole de sorte qu'il se répète pour des intervalles réguliers.

DÉMO avec répétition des symboles

JavaScript-

var iconsetngs = {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
var polylineoptns = {
    path: markers,
    strokeOpacity: 0.8,
    strokeWeight: 3,
    map: map,
    icons: [{
        icon: iconsetngs,
        offset: '100%'}]
};
polyline = new google.maps.Polyline(polylineoptns);

La caractéristique intéressante de ce symbole prédéfinies(la flèche vers l'avant spécialement), c'est que la flèche pointe vers la direction exacte de vos coordonnées sont situés. Alors, qui sert évidemment le but de définir la direction dans un Système de Suivi.

Mise à JOUR: Pas de doute sur le point que vous essayez de dire dans les commentaires. Les marqueurs peuvent être affichés de la même façon. Voici le code qui permet d'ajouter des marqueurs avec une boucle et également définir la polyligne avec des flèches:

DÉMO AVEC des MARQUEURS ET de la POLYLIGNE

Javascript:

var polylineoptns = {
        strokeOpacity: 0.8,
        strokeWeight: 3,
        map: map,
        icons: [{
            repeat: '70px', //CHANGE THIS VALUE TO CHANGE THE DISTANCE BETWEEN ARROWS
            icon: iconsetngs,
            offset: '100%'}]
    };
    polyline = new google.maps.Polyline(polylineoptns);
    var z = 0;
    var path = [];
    path[z] = polyline.getPath();
    for (var i = 0; i < markers.length; i++) //LOOP TO DISPLAY THE MARKERS
    {
        var pos = markers[i];
        var marker = new google.maps.Marker({
            position: pos,
            map: map
        });
        path[z].push(marker.getPosition()); //PUSH THE NEWLY CREATED MARKER'S POSITION TO THE PATH ARRAY
    }

OriginalL'auteur Cdeez