使用Google地图api V3 ASP.net绘制不同颜色的折线
Drawing multiple polyline with different color using Google map api V3 ASP.net
我能够在谷歌地图上绘制多个折线并样式化它们,但我想用不同的颜色为每个折线着色。
目前,我有这个代码:
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的颜色数组。长度- 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
});
}
用于绘制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);
}
以上答案正确。这将导致分离的折线。这可以通过在每条折线中添加圆形起始和结束帽来改进。
polyline.setEndCap(new RoundCap());
polyline2.setStartCap(new RoundCap());
相关文章:
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 高亮显示时编辑文本大小和颜色
- 用与线条相同的颜色填充多折线图上的点
- 更改使用Chart.js创建的图表中的轴线颜色
- 如何使用jquery更改html中的背景颜色
- 动态更改高图中的系列颜色
- 跟踪jqplot垂直折线图的鼠标位置
- jsf中两个字符串的颜色代码差异
- 我们如何使用css或JavaScript在i/j上更改句点(点)的颜色
- charts js更改折线图轴的字体大小/颜色和背景线
- 为什么谷歌地图的折线笔触颜色总是黑色
- 折线图上的角图错误:无法解析颜色
- 改变折线的颜色和宽度- ESRI Javascript API
- 在传单中创建不同颜色的折线
- 在地图上用不同的颜色绘制多条折线
- 如何通过点击改变折线的颜色
- 改变折线图中圆圈的颜色
- nv无法更改折线图中线条的颜色
- 使用Google地图api V3 ASP.net绘制不同颜色的折线
- chart .js折线图设置背景颜色