使用 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 绘制多条不同颜色的折线的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我可以在谷歌地图中绘制多条折线并设置它们的样式,但我想用不同的颜色为每条折线着色.
I am able to draw multiple polyline in google map and style them, but I want to color each polyline with a different color.
目前,我有这个代码:
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?
推荐答案
当然可以.例如,假设您知道每条线要搭配什么颜色,假设您有一个长度等于 DrivePath.length - 1 的颜色数组.
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.
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
});
}
这篇关于使用 Google map api V3 ASP.net 绘制多条不同颜色的折线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文