路线建好后如何改变google map api的路线颜色

问题描述

你会发现许多已经答案，展示了如何用不同的颜色建立路线

我想知道如何改变颜色一次它已经建成并呈现。

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

code：

  var directionsDisplay ; 
 var directionsService = new google.maps.DirectionsService（）; 
 var map; 
 
函数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）; 
} 
 
函数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）; 
  

演示如何显示其不能使用两种路线：

解决方案

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）; 
}）; 
  

You will find many already answers showing how to build route with different colors on it how to change the color of route in google maps v3

I want to know how I can change the color once its already builded and rendered.

I have many different routes showing on the map, but I want to show red color or darker color, if this direction point is active and change other route colors to gray, until one of them are active.

code:

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

demo to show how its not working with two routes: http://jsfiddle.net/8xq4gd8y/15/

解决方案

The directionsRenderer class has a setOptions method. See the documentation.

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

For this to work, you need to remove it from the map and add it back to see the color change.

For example in an event listener, you would do:

google.maps.event.addListener(map, 'click', function() {

  directionsDisplay.setMap(null);

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

  directionsDisplay.setMap(map);
});

这篇关于路线建好后如何改变google map api的路线颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！