如何使用部分Google地图的屏幕截图使用JavaScript

Question

在我的页面上,有一个容器使用Google Maps API显示地图,下面有一个按钮,用户可以将地图拖动到某个位置,然后点击按钮,我想拍摄地图的截图现在显示在容器中并在画布中显示.是否可以使用纯JavaScript执行此操作？

只需要支持Chrome

Answer 1

没有浏览器支持就很难做到.但您可以使用Google Static Maps API:https: //developers.google.com/maps/documentation/staticmaps/

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

有一些项目可以将HTML DOM绘制到canvas:

• HTML2Canvas:http://html2canvas.hertzen.com/index.html
• jsFeedback: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扩展程序的屏幕截图