javascript - 谷歌地图多色折线

标签 javascript colors maps google-polyline

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

我现在想让多段线呈褪色,以指示路线的盈利能力,对盈利路线显示绿色,对亏损路线显示红色。由于每条折线都有两种可能的盈利能力(来自两个起点),因此颜色应逐渐淡入另一种颜色。

我认为,我可以将多段线分成两部分,每条线仅显示一半,但颜色不会逐渐淡入另一条线。

有办法做到这一点吗?

目前我正在创建如下线:

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

这工作得很好,但我不确定如何让颜色从 color1 逐渐淡入 color2。

提前致谢。

最佳答案

谷歌地图文档没有任何淡入淡出颜色的选项。 它们看起来是固定的,但是可以进行一些自定义,但不支持从一种颜色淡入另一种颜色。

关于javascript - 谷歌地图多色折线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23741568/

相关文章:

java - 如何获取图像特定像素的颜色? - java

javascript - Google map 对我不起作用

matlab - 使用 Matlab 2014b 的锯齿状轮廓

r - 在 R 中的较大 map 中创建插入 map

JavaScript this.todoList.filter 不是函数

colors - 给定灰度值,什么颜色提供最高的视觉对比度?

javascript - 将数据从React传递到 Node 服务器

html - CSS Transition 在 IE 中有效,但在 Firefox、Chrome 或 Opera 中无效

javascript - 按类获取div的编号顺序

javascript - 是否可以从 jqGrid header 中删除展开/折叠按钮?