2014-05-19 209 views
1

我有一個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慢慢消失。

在此先感謝。

回答

1

谷歌地圖文檔沒有任何選項淡入顏色。 它們會顯示爲固定的,但可以完成一些自定義,但不支持從一種顏色到另一種顏色的淡入淡出。

0

嘗試在RGBA模式下給出顏色。

我的意思是,而不是在十六進制模式下給顏色,例如#FF0000,你可以在RGBA模式下使用它,例如rgba(255,0,0,1)。

要在RGBA模式下淡化您的顏色,請更改最後一位數字的值並將其保持在0(透明)和1(可見)之間。

您可以使用此link將您的十六進制顏色轉換爲RGBA。