Javascript 使用 Google map api V3 ASP.net 绘制多条不同颜色的折线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14379586/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drawing multiple polyline with different color using Google map api V3 ASP.net
提问by Ravi
I am able to draw multiple polyline in google map and style them, but I want to color each polyline with a different color.
我能够在谷歌地图中绘制多条折线并为其设置样式，但我想用不同的颜色为每条折线着色。
Currently, I have this code:
目前，我有这个代码：
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);
Is there any way I can add a separate style to each polyline that I am creating?
有什么方法可以为我创建的每条折线添加单独的样式？
回答by duncan
Certainly. For instance suppose you know what colours you want to go with each line, let's assume you therefore have an array of colours which has a length equal to DrivePath.length - 1.
当然。例如，假设您知道每条线要搭配什么颜色，因此假设您有一个长度等于 DrivePath.length - 1 的颜色数组。
var Colors = [
"#FF0000",
"#00FF00",
"#0000FF",
"#FFFFFF",
"#000000",
"#FFFF00",
"#00FFFF",
"#FF00FF"
];
Now, instead of drawing one polyline, draw a separate polyline for each coordinate.
现在，不是绘制一条折线，而是为每个坐标绘制一条单独的折线。
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
});
}
回答by Divyanshu Rawat
For drawing 2 different Polylines
用于绘制 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);
}
回答by F. Milliard
The above answers are correct. This would results in separated polylines. This could be improved by adding round start caps and round end caps of each polylines.
以上答案都是正确的。这将导致分离的多段线。这可以通过添加每条多段线的圆形起始端和圆形端端来改进。
polyline.setEndCap(new RoundCap());
polyline2.setStartCap(new RoundCap());
