Question

目前我尝试做的是在名为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

我看过一个涉及this very question的stackoverflow问题，然而，那里的解决方案似乎没有解决我的问题。

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

Answer 1

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

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

Answer 2

您可以使用此链接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+"')");
                }
            });

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

在Google地图上使用blur.js（v3 API）

2 个答案: