changer la couleur de la polyligne dans le DirectionsRenderer

Question

J'ai intégré une carte et je souhaite afficher l'itinéraire entre deux lieux. Tout fonctionne bien et les directions s'affichent parfaitement, mais je veux changer la couleur de l'image. Polyline direction ,j'ai essayé ce code comme le dit la documentation :

//polyline options
    var pOptions = {
            map: map,
            strokeColor: "#2249a3",
            strokeOpacity: 0.9 ,
            strokeWeight: 12,
            z-index: 99
    };
    logJava(polylineOptions);

    //directionsRenderer options
    var mDirectionsRendererOptions = {
            map: map,
            suppressMarkers: true,
            suppressInfoWindows: true,
            polylineOptions: pOptions
    };

    logJava(mDirectionsRendererOptions);

    directionsDisplay = new google.maps.DirectionsRenderer(mDirectionsRendererOptions);

Mais lorsque j'ajoute ce code, la carte s'arrête et n'affiche rien, lorsque je le commente, tout fonctionne correctement.

ce qui ne va pas avec ce code, et comment changer la couleur de la polyligne avec google maps javascript api v3 ?

Merci d'avance,

Answer 1

Aux déclarations globales

var polylineOptionsActual = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 10
    });

Lors de l'initialisation

function initialize() {
   directionsDisplay = new google.maps.DirectionsRenderer({polylineOptions: polylineOptionsActual});

Answer 2

Dans la réponse marquée comme résolue, je vois que l'objet Polyline est utilisé pour polylineOptions. Dans mon cas, j'utilise le code suivant

new google.maps.DirectionsRenderer({ suppressMarkers: true, polylineOptions: { strokeColor: '#5cb85c' } });

La différence est que j'attribue options de polyligne , pas Polyligne objet. Je ne suis pas sûr que cela puisse être utile, mais j'ai décidé d'ajouter cette réponse.

Answer 3

@Seacat, après avoir mis à jour le directionsRenderer avec les nouvelles polylineOptions, vous devez rendre à nouveau la réponse des directions qui est stockée dans l'objet renderer

directionsRenderer.setDirections(directionsRenderer.directions);

Answer 4

Utilisation setOptions(options:DirectionsRendererOptions) rend le code plus lisible. Le codage serait le suivant :

Au niveau mondial :

var directionsDisplay;

A l'intérieur initialize() méthode :

var polyline = new google.maps.Polyline({
    strokeColor: '#C00',
    strokeOpacity: 0.7,
    strokeWeight: 5
    });
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setOptions({polylineOptions: polyline}); 
now directionDisplay can be used in any method with the custom poly line.