谷歌地图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多边形重新着色

回答

相关问题