google map api polygon re-color

Question

Я хочу изменить цвет многоугольника после того, как он уже установлен. но на пользовательском событии.

После того, как цвета маршрута установлены, они не меняются впоследствии, что не происходит с тех пор, потому что внутри одной и той же функции оно изменится, но после этого оно не будет, даже существует ссылка на переменную.

Вот скрипку демо:

http://jsfiddle.net/8xq4gd8y/15/

код

setTimeout (function() { 
    console.log('run'); 
    console.log(directionsRenderer2); // < exist in console log 
     directionsRenderer2.setOptions({ 
      polylineOptions: { 
       strokeColor: 'gray' 
      } 
     }); 
    }, 90); 

Answer 1

Похоже, вам нужно установить свойство карта DirectionsRenderer, чтобы заставить его изменить:

setTimeout (function() { 
    console.log('run'); 
    console.log(directionsRenderer2); // < exist in console log 
    directionsRenderer2.setOptions({ 
    polylineOptions: { 
     strokeColor: 'gray' 
    }, 
    map:map 
    }); 
},1000); 

updated fiddle

фрагмент кода:

var map; 
 

 
function renderDirections(result, map) { 
 
    var directionsRenderer1 = new google.maps.DirectionsRenderer({ 
 
    directions: result, 
 
    routeIndex: 3, 
 
    map: map, 
 
    polylineOptions: { 
 
     strokeColor: "red" 
 
    } 
 
    }); 
 
    console.log("routeindex1 = ", directionsRenderer1.getRouteIndex()); 
 

 
    var directionsRenderer2 = new google.maps.DirectionsRenderer({ 
 
    directions: result, 
 
    routeIndex: 1, 
 
    map: map, 
 
    polylineOptions: { 
 
     strokeColor: "blue" 
 
    } 
 
    }); 
 
    console.log("routeindex2 = ", directionsRenderer2.getRouteIndex()); //line 17 
 

 
    setTimeout(function() { 
 
    console.log('run'); 
 
    console.log(directionsRenderer2); // < exist in console log 
 
    directionsRenderer2.setOptions({ 
 
     polylineOptions: { 
 
     strokeColor: 'gray' 
 
     }, 
 
     map: map 
 
    }); 
 
    }, 1000); 
 
} 
 

 
function calculateAndDisplayRoute(origin, destination, directionsService, directionsDisplay, map) { 
 
    directionsService.route({ 
 
    origin: origin, 
 
    destination: destination, 
 
    travelMode: google.maps.TravelMode.DRIVING, 
 
    provideRouteAlternatives: true 
 
    }, function(response, status) { 
 
    if (status === google.maps.DirectionsStatus.OK) { 
 
     renderDirections(response, map); 
 
    } else { 
 
     window.alert('Directions request failed due to ' + status); 
 
    } 
 
    }); 
 
} 
 

 
function initialize() { 
 
    var directionsService = new google.maps.DirectionsService(); 
 
    var directionsDisplay = new google.maps.DirectionsRenderer(); 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    directionsDisplay.setMap(map); 
 
    calculateAndDisplayRoute(new google.maps.LatLng(51.61793418642200, -0.13678550737318), new google.maps.LatLng(51.15788846699750, -0.16364536053269), directionsService, directionsDisplay, map); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>