谷歌地圖API多邊形重新着色

我想更改多邊形的顏色後，它已經設置。但在用戶事件。谷歌地圖API多邊形重新着色

一旦設置了路線顏色，之後它不會改變，這並不是因爲，因爲在同樣的函數中它會改變，但在此之後，它不會，即使是變量引用也存在。

這裏是提琴演示：

代碼

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

來源

2016-02-25 Basit

昨天也有類似的問題，也許它可以幫助http://stackoverflow.com/questions/35597394/how-to-change-color- google-map-api-after-route-is-build/35598708＃35598708 –

你應該避免爲同一個問題打開多個問題。我在上一個問題中給出的解決方案可行，但@geocodezip提出的解決方案更加簡單！ – MrUpsidown

對不起，但以前的問題沒有解決這個問題。它只會讓它變得更加複雜。所以我重新張貼，使其簡單，我刪除了以前，它不會讓我。但不便之處 – Basit

看起來你需要設置的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>

來源

2016-02-25 08:29:40 geocodezip

總是向您學習;）這比我在他之前的問題上給出的解決方案還要容易。乾杯! – MrUpsidown

@geocodezip我一直在設置routeIndex和許多不同的東西，但沒有解決它大聲笑...你的回答解決了它：）...謝謝你。 – Basit

谷歌地圖API多邊形重新着色

回答

相關問題