谷歌地图多色折线

我有一个Google地图页面，根据一堆坐标绘制各种折线。他们都通过一个大圆折线连接两个点。所有线条都具有相同的颜色。这些线路是网络上的路线谷歌地图多色折线

我现在想用多彩的多义线表示路线的盈利能力，为盈利路线显示绿色，为损失路线显示红色。由于每条多段线有两种可能的盈利能力（来自两个始发点），所以颜色应逐渐淡出到另一种颜色。

我假设我可以将多段线分成两部分，每部分只显示一半线条，但颜色不会逐渐淡入另一部分。

有没有办法做到这一点？

目前我创建的线条如下：

var routes = [['CJU', 'SZX', 33.5112991333, 126.49299621582, 22.6392993927, 113.81099700928, 1, 7, 3163768], 
['CJU', 'PEK', 33.5112991333, 126.49299621582, 40.08010101318, 116.58499908447, 0.5, 4, 3163766], 
['CJU', 'PVG', 33.5112991333, 126.49299621582, 31.14340019226, 121.80500030518, 0.5, 4, 3163767], 
['CJU', 'WUH', 33.5112991333, 126.49299621582, 30.78380012512, 114.20800018311, 0.5, 4, 3163769],]; 

function setRoutes(map, flights) { 
     for (var j = 0; j < flights.length; j++) { 
      var route = flights[j]; 
      var infowindow = new google.maps.InfoWindow({ content: 'From '+route[0]+' to '+route[1]+' ', position: new google.maps.LatLng(route[4], route[5]) }); 

      var flt = new google.maps.Polyline({path: [new google.maps.LatLng(route[2], route[3]), new google.maps.LatLng(route[4], route[5])], strokeColor: "#FF0000", strokeOpacity: route[6], strokeWeight: route[7], geodesic: true, url: 'http://domain.com/page.asp?F='+route[8] }); 
      flt.setMap(map); 
      google.maps.event.addListener(flt, 'click', function() { NewWindow(this.url,'name','770','490','Yes');return false; }); 
      var apt = new google.maps.MarkerImage('http://domain.com/marker/dot.png', null, null, new google.maps.Point(8,14), new google.maps.Size(20,20)); 
      var dep = new google.maps.LatLng(route[2], route[3]); 
      var marker = new google.maps.Marker({position: dep, map: map, icon: apt, title: route[0]}); 
      var arr = new google.maps.LatLng(route[4], route[5]); 
      var marker = new google.maps.Marker({position: arr, map: map, icon: apt, title: route[1]}); 
     } 
    } 

setRoutes(map, routes);

这只是正常的，但我不知道我怎么可能有颜色逐渐从颜色1到COLOR2慢慢消失。

在此先感谢。

来源

2014-05-19 Matth

谷歌地图文档没有任何选项淡入颜色。它们会显示为固定的，但可以完成一些自定义，但不支持从一种颜色到另一种颜色的淡入淡出。

来源

2014-05-19 15:35:16

尝试在RGBA模式下给出颜色。

我的意思是，而不是在十六进制模式下给颜色，例如＃FF0000，你可以在RGBA模式下使用它，例如rgba（255,0,0,1）。

要在RGBA模式下淡化您的颜色，请更改最后一位数字的值并将其保持在0（透明）和1（可见）之间。

您可以使用此link将您的十六进制颜色转换为RGBA。

来源

2015-08-19 09:54:51

谷歌地图多色折线

回答

相关问题