如何使用JavaScript拍摄部分谷歌地图的屏幕截图

How to take the screenshot of part of Google Maps use JavaScript

本文关键字：谷歌地图 屏幕截图 摄部 何使用 JavaScript      更新时间：2023-12-12

在我的页面上，有一个使用Google Maps API显示地图的容器，它下面有一个按钮，用户可以将地图拖动到某个位置，然后单击该按钮，我想现在将容器中显示的地图截图并显示在画布中。用纯JavaScript可以做到这一点吗？

只需支持Chrome

如果没有浏览器支持，将很难做到这一点。但您可以使用Google静态地图API：https://developers.google.com/maps/documentation/staticmaps/

示例：https://developers.google.com/maps/documentation/staticmaps/#quick_example

有一些项目可以将HTML DOM绘制到画布上：

  • HTML2 canvas：http://html2canvas.hertzen.com/index.html
  • js反馈：http://hertzen.com/experiments/jsfeedback/

您还可以将javascript与一些服务器端解决方案集成（使用webkit），例如phantomjs

代码示例：（点击此处阅读更多）

var page = require('webpage').create();
page.open('http://www.google.com', function() {
    page.viewportSize = {width: 1024, height: 768};
    page.render('screenshot.png');
    phantom.exit();
});

如果您只需要针对特定用户范围的chrome解决方案，您可以编写自己的chrome扩展来做到这一点：使用javascript对chrome扩展进行屏幕截图

相关文章：