jak zmienić kolor trasy w google maps v3

Używam tego code, aby uzyskać wskazówki między dwoma punktami. Czy można zmienić kolor trasy z niebieskiego? Nie używam polilinii w moim kodzie.jak zmienić kolor trasy w google maps v3

Niż z góry :)

Źródło

2013-09-26 user2809895

Można określić kolor linii podczas tworzenia DirectionsRenderer, przy użyciu opcjonalnego DirectionsRendererOptions struct.

Działa to dla mnie, po prostu zmieniając linię, w której tworzony jest obiekt DirectionsRendered:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Directions service</title> 
    <link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet"> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3"></script> 
    <script> 
var directionsDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var map; 

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

    var mapOptions = { 
    zoom:7, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    center: {lat: 41.850033, lng: -87.6500523} 
    } 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    directionsDisplay.setMap(map); 
} 

function calcRoute() { 
    var start = document.getElementById('start').value; 
    var end = document.getElementById('end').value; 
    var request = { 
     origin:start, 
     destination:end, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 
    directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
    } 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="panel"> 
    <b>Start: </b> 
    <select id="start" onchange="calcRoute();"> 
     <option value="chicago, il">Chicago</option> 
     <option value="st louis, mo">St Louis</option> 
     <option value="joplin, mo">Joplin, MO</option> 
     <option value="oklahoma city, ok">Oklahoma City</option> 
     <option value="amarillo, tx">Amarillo</option> 
     <option value="gallup, nm">Gallup, NM</option> 
     <option value="flagstaff, az">Flagstaff, AZ</option> 
     <option value="winona, az">Winona</option> 
     <option value="kingman, az">Kingman</option> 
     <option value="barstow, ca">Barstow</option> 
     <option value="san bernardino, ca">San Bernardino</option> 
     <option value="los angeles, ca">Los Angeles</option> 
    </select> 
    <b>End: </b> 
    <select id="end" onchange="calcRoute();"> 
     <option value="chicago, il">Chicago</option> 
     <option value="st louis, mo">St Louis</option> 
     <option value="joplin, mo">Joplin, MO</option> 
     <option value="oklahoma city, ok">Oklahoma City</option> 
     <option value="amarillo, tx">Amarillo</option> 
     <option value="gallup, nm">Gallup, NM</option> 
     <option value="flagstaff, az">Flagstaff, AZ</option> 
     <option value="winona, az">Winona</option> 
     <option value="kingman, az">Kingman</option> 
     <option value="barstow, ca">Barstow</option> 
     <option value="san bernardino, ca">San Bernardino</option> 
     <option value="los angeles, ca">Los Angeles</option> 
    </select> 
    </div> 
    <div id="map-canvas"></div> 
    </body> 
</html>

Źródło

2013-09-26 08:52:32 duncan

I Wystąpił błąd informujący, że dwukropek po polylineOptions jest nieoczekiwany. Czy możesz ponownie sprawdzić kod i zasugerować mi coś? – user2809895

Działa dla mnie; Zaktualizuję swoją odpowiedź za pomocą pełnego kodu, którego użyłem. Możesz dodać swój kod do swojego pytania, na wypadek, gdyby wystąpił błąd składni. – duncan

thnq tyle za kod. To działa. – user2809895

można zmienić kolor poprzez zmianę koloru obrysu :) takie proste

directionsService = new google.maps.DirectionsService(); 
    directionsDisplay = new google.maps.DirectionsRenderer({ polylineOptions: { strokeColor: "#8b0013" } }); 
    directionsDisplay.setMap(map); 
    directionsDisplay.setOptions({ suppressMarkers: true }); 


     calcRoute();

Źródło

2014-08-31 04:19:02

jak dołączyć " polilinie (tablica) "i" polylineOptions "podczas generowania mapy statycznej? lubię: "https: //maps-api-ssl.google.com/maps/api/staticmap? ...." –

jak zmienić kolor trasy w google maps v3

Odpowiedz

Powiązane problemy