3

目前我正在尝试做的是在map_canvas包含谷歌地图的名为 div 上使用 blur.js。我已经尝试在其上创建一个 div 并简单地使用：

$(document).ready(function() {

    $('#blurredCoverDiv').blurjs({
        source: '#map_canvas',
        radius: 30,
        overlay: 'rgba(0, 0, 0, .2)'
    });

});

但是，这会导致控制台出现错误：

GET http://[site]/none 404 (Not Found) blur.js:279

我已经看到一个涉及这个问题的 stackoverflow 问题，但是，那里的解决方案似乎没有解决我的问题。

关于为什么会发生这种情况的任何想法，或者解决它的方法？

4

2 回答 2

2

background-image您会收到 404 错误，因为 blur.js 正在的sourcediv中寻找 a 。由于您map_canvas的设置为none，因此 blur.js 会将 404 错误推送到控制台（未找到 'none'）。

我还没有测试过，但我现在想到的解决方案是将谷歌地图静态图像设置为你map_canvas的background-image. 如果可行，您可以继续编写一个函数，将当前视图放在map_canvas的画布上，并将其作为静态图像应用到其background-image. 让我知道它是否有效。

于 2013-07-11T05:33:54.230 回答
0

您可以从此链接http://html2canvas.hertzen.com/使用 html2canvas

它可以让你从 div 中截取屏幕截图。这是一个例子：

html2canvas($map,{
                useCORS:true,
                height:null,
                width:null,
                onrendered: function(canvas){
                    var dataUrl = canvas.toDataURL("image/png");
                    $('.blurred-bg').css("background-image","url('"+dataUrl+"')");
                }
            });

高度和宽度的值“null”用于以 div 的完整大小捕获地图。结果如下：Example blur div over maps v3

于 2014-11-29T13:23:27.950 回答