javascript - Google Map JS API v3 无法打印路线

Question

在我们的网页中，我们集成了 google maps js api v3 以显示某些地方的动态 View 。这很好，包括行车路线列表。

但是，打印给我们的只是 map ， map 上没有蓝色路线。

我现在发现这些元素是使用 canvas 元素呈现的，并且几个 SO 线程告诉我们需要从 canvas 到 img(html) 的转换(其他动态内容(如多段线等)也是如此。

但是 c.toDataURL() 给了我们一个安全错误(在 chrome 中):“捕获到 SecurityError:无法在‘HTMLCanvasElement’上执行‘toDataURL’:可能无法导出受污染的 Canvas 。” (此外，其他浏览器根本没有打印，因为脚本执行已停止，可能是因为该错误。

我们的代码如下，它获取相关的 html，复制它，并像在各个页面上显示的那样进行转换，然后继续打印，如果注释掉转换就可以正常工作...

    var originalContents = document.body.innerHTML;

    var dataUrl = [];
    var i = 0;

    /* Conversion Code */
    $("#map_canvas canvas").filter(function(){
      dataUrl.push(this.toDataURL("image/png")); // <-- THIS GIVES THE ERROR    
    });
    /* Conversion Code */

    var DocumentContainer = document.getElementById('map_canvas');
    var DocumentContainer_temp = $(DocumentContainer).clone();

    DocumentContainer_temp.find(".gm-style-iw").parent().remove();
    DocumentContainer_temp.find(".gmnoprint").remove();

    /* Conversion Code */
    $(DocumentContainer_temp).find('canvas').each(function () {               
     $(this).replaceWith('<img src="' +  dataUrl[i] 
                          + '" style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px;" />');
     i++;
    });
    /* Conversion Code */

    //.... printing etc. following later

在此先感谢您的帮助!

编辑:我不知道为什么 Google 不提供打印此类内容的教程(我猜他们并不想正式支持此功能)，而且我们的客户也请求了此功能，并表示这很常见在网站上，而我从来没有看到一个网站做我们在这里尝试做的事情:

1. 显示带有动态谷歌地图内容的 div
2. 允许获取行车路线
3. 打印元素、 map 和方向。

我很高兴从您那里得到任何网站的链接，因为这样我就可以轻松查看他们的 JS 文件并了解他们是如何做到的....

再次，提前致谢!

Answer 1

基本上您的问题是:为什么打印 map 如此困难

我会反问:为什么人们让它变得如此困难。

打印 map (包括通过 Canvas 创建的形状)并不难，只需按下打印按钮即可。

困难的是复制/克隆 map ，但我不明白为什么你必须这样做

与其采用 javascript 方式，不如使用 CSS。使用可以通过 CSS 隐藏除 map 以外的任何内容的页面布局，您所需要的只是一个媒体打印样式表。

当然这在大多数时候也很复杂，一个非常简单的解决方案:

为 map 使用 iframe(可以即时创建)。要仅打印 map ，请调用 iframe 的 print-method，将打印的只是 map 。