【问题标题】:Google maps gradient polylines: need for a hack?谷歌地图渐变折线:需要破解吗?
【发布时间】:2014-11-22 09:49:08
【问题描述】:
我想要一条从当前位置 (alpha = 1.0) 淡出到起始位置 (alpha = 0.0) 的折线。以这种方式,为这样的一行提供某种视觉年表。
经过一番谷歌搜索,我得出结论,目前折线上的渐变不是地图功能集的一部分。
- 我的结论是否正确。我希望不会,因为我即将这样做
- 用多条单线绘制复杂的折线,每条线的不透明度都在增加。问题:当我的折线由数百个点组成时,这会炸毁浏览器吗?
提前谢谢..
【问题讨论】:
标签:
google-maps
gradient
polyline
【解决方案1】:
所以,这里不仅仅是评论,所以我将其发布为答案,意识到这可能不是答案,我不希望任何人这样尊重:
所以,不要像这样画折线:
line = new google.maps.Polyline({
path: path,
map: map
});
我想出了这个:
function multiMonolines (path) {
var totalPoints =path.length;
for(var i = 0; i < (path.length-1); ++i){
var startingPoint =path[i];
var endingPoint=path[i+1];
var shortPath=new Array(startingPoint,endingPoint);
line = new google.maps.Polyline({
path: shortPath,
---and here I do some stuff with opacity---
map: map
});
};
};
我的发现是,地图绘制得足够快。 (有 381 个“多单声道”)。
但是:在 Safari 中放大地图会挂起网页。 Chrome 在这方面更容易。
我意识到绘制 380 条线是一件相当昂贵的事情,所以我想我将不得不回到折线,希望有人知道如何制作渐变折线。或者直到 Apple 进一步优化其 js 渲染引擎。