jquery - 在Google map 上使用blur.js(v3 API)

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

我看到一个 stackoverflow 问题涉及 this very question但是，那里的解决方案似乎并没有解决我的问题。

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

Answer 1

您收到 404 错误，因为blur.js 正在 source 的 div 中查找 background-image。由于您的 map_canvas 设置为 none，blur.js 会将 404 错误推送到控制台(未找到“none”)。

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