【问题标题】:Google maps gradient polylines: need for a hack?谷歌地图渐变折线:需要破解吗?
【发布时间】:2014-11-22 09:49:08
【问题描述】:

我想要一条从当前位置 (alpha = 1.0) 淡出到起始位置 (alpha = 0.0) 的折线。以这种方式,为这样的一行提供某种视觉年表。

经过一番谷歌搜索,我得出结论,目前折线上的渐变不是地图功能集的一部分。

  1. 我的结论是否正确。我希望不会,因为我即将这样做
  2. 用多条单线绘制复杂的折线,每条线的不透明度都在增加。问题:当我的折线由数百个点组成时,这会炸毁浏览器吗?

提前谢谢..

【问题讨论】:

标签: 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 渲染引擎。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-09-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-07-02
    • 2014-07-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多