Javascript 使用Google map api V3 ASP.net绘制不同颜色的多段线

Javascript 使用Google map api V3 ASP.net绘制不同颜色的多段线,javascript,google-maps-api-3,Javascript,Google Maps Api 3,我可以在谷歌地图中绘制多条多段线并设置它们的样式,但我想用不同的颜色给每条多段线上色 目前,我有以下代码: 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.46

我可以在谷歌地图中绘制多条多段线并设置它们的样式,但我想用不同的颜色给每条多段线上色

目前,我有以下代码:

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

是否有任何方法可以为我正在创建的每条多段线添加单独的样式?

当然可以。例如,假设您知道每条线要使用什么颜色,那么我们假设您有一个长度等于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
  });
}
for(变量i=0;i
用于绘制两条不同的多段线


以上答案是正确的。 这将导致分离的多段线。 这可以通过添加每个多段线的圆形起点封口和圆形终点封口来改进

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

谢谢你的答复。但我只能看到一种颜色。请看png[链接]你确定那是正确的png,我只看到一个灰色+白色条纹的方框是的,我从上面提到的链接打开了它。我可以看到一个png文件。如果你喜欢,我可以给你发电子邮件。使用其他颜色。前6种颜色是红色,可能很难区分(特别是当你像我一样色盲时)。最后3条路径只能在非常高的缩放比例下看到-level@Dr.Molle我想我是色盲。我换了颜色,效果很好。Thanx Molle Thnx Duncan博士请分享绘制多段线的代码。我已经测试了你的代码,但我只能看到地图上的一行
polyline.setEndCap(new RoundCap());
polyline2.setStartCap(new RoundCap());