如何在构建路线后在谷歌地图API中更改路线的颜色

how to change color of route in google map api after route is build

本文关键字：改路 颜色 谷歌地图 构建路 API      更新时间：2023-09-26

你会发现许多已经有答案的答案，展示了如何用不同的颜色构建路线如何在谷歌地图v3中更改路线的颜色

我想知道如何在构建和渲染后更改颜色。

我在地图上显示了许多不同的路线，但我想显示红色或较深的颜色，如果此方向点处于活动状态，并将其他路线颜色更改为灰色，直到其中一个处于活动状态。

法典：

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);

演示以显示它如何不适用于两条路由：http://jsfiddle.net/8xq4gd8y/15/

directionsRenderer类有一个setOptions方法。请参阅文档。

directionsDisplay.setOptions({
  polylineOptions: {
    strokeColor: 'red'
  }
});

为此，您需要将其从地图中删除并重新添加以查看颜色变化。

例如，在事件侦听器中，您将执行以下操作：

google.maps.event.addListener(map, 'click', function() {
  directionsDisplay.setMap(null);
  directionsDisplay.setOptions({
    polylineOptions: {
      strokeColor: 'blue'
    }
  });
  directionsDisplay.setMap(map);
});

JSFiddle 演示

相关文章：