使用 Google map api V3 ASP.net 绘制多条不同颜色的折线答案

【问题标题】：Drawing multiple polyline with different color using Google map api V3 ASP.net使用 Google map api V3 ASP.net 绘制多条不同颜色的折线
【发布时间】：2013-01-17 12:52:58
【问题描述】：

我可以在谷歌地图中绘制多条折线并设置它们的样式，但我想用不同的颜色为每条折线着色。

目前，我有这个代码：

var DrivePath = [
  new google.maps.LatLng(37.772323, -122.214897),
  new google.maps.LatLng(21.291982, -157.821856),
  new google.maps.LatLng(-18.142599, 178.431),
  new google.maps.LatLng(-27.46758, 153.027892),
  new google.maps.LatLng(12.97918167,   77.6449),
  new google.maps.LatLng(12.97918667,   77.64487167),
  new google.maps.LatLng(12.979185, 77.64479167),
  new google.maps.LatLng(12.97918333, 77.64476)
];


var PathStyle = new google.maps.Polyline({
  path: DrivePath,
  strokeColor: "#FF0000",
  strokeOpacity: 1.0,
  strokeWeight: 2
});

PathStyle.setMap(map);

有什么方法可以为我正在创建的每条折线添加单独的样式？

【问题讨论】：

能否分享绘制多条折线的代码。我已经测试了您的代码，但我只能在地图中看到一行

标签： javascript google-maps-api-3

【解决方案1】：

当然。例如，假设您知道每行要使用什么颜色，假设您因此有一个长度等于 DrivePath.length - 1 的颜色数组。

var Colors = [
    "#FF0000", 
    "#00FF00", 
    "#0000FF", 
    "#FFFFFF", 
    "#000000", 
    "#FFFF00", 
    "#00FFFF", 
    "#FF00FF"
];

现在，不再绘制一条折线，而是为每个坐标绘制一条单独的折线。

for (var i = 0; i < DrivePath.length-1; i++) {
  var PathStyle = new google.maps.Polyline({
    path: [DrivePath[i], DrivePath[i+1]],
    strokeColor: Colors[i],
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: map
  });
}

【讨论】：

感谢您的回复。但我只能看到一种颜色。请查看 png [链接]coeindia.in/test/harry/map.png
你确定这是正确的 png，我只看到一个灰白色条纹框
是的，我从上面提到的链接打开了它。我可以看到一个png文件。如果你愿意，我可以给你发电子邮件。
使用其他颜色。前 6 种颜色是红色，可能很难区分（尤其是当你像我一样色盲时）。您只能在非常高的缩放级别下看到的最后 3 条路径
@Dr.Molle 我想我是色盲。我改变了颜色，它就像一个魅力。感谢 Molle 博士 Thnx 邓肯

【解决方案2】：

用于绘制 2 条不同的折线

    function initialize()
    {

                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 7,
                    center: {lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA.
                  });

                var polyOptions = {
                    strokeColor: '#000000',
                    strokeOpacity: 1.0,
                    strokeWeight: 3
                };
                var polyOptions2 = {
                    strokeColor: '#FFFFFF',
                    strokeOpacity: 1.0,
                    strokeWeight: 3
                };

                var polyline = new google.maps.Polyline(polyOptions);
                var polyline2= new google.maps.Polyline(polyOptions2);
                polyline.setMap(map);
                polyline2.setMap(map);
                google.maps.event.addListener(map, 'click', addLatLng);
    }

【讨论】：

【解决方案3】：

以上答案都是正确的。这将导致分离的折线。这可以通过为每条多段线添加圆形起始端和圆形结束端来改善。

polyline.setEndCap(new RoundCap());
polyline2.setStartCap(new RoundCap());

【讨论】：