如何截取部分Google地图的屏幕截图使用JavaScript [英] How to take the screenshot of part of Google Maps use JavaScript

问题描述

在我的网页上，有一个容器使用Google Maps API显示地图，其下方有一个按钮，用户可以将地图拖动到某个位置，然后点击按钮，我想截取屏幕截图的地图显示在容器中，并将其显示在画布中。

On my page, there is a container which use Google Maps API to display a map, there is a button below it, user can drag the map to a position, then click the button, I'd like to take the screenshot of the map displayed in the container now and show it in a canvas. Is it possible to do this with pure JavaScript?

推荐答案

只需要支持Chrome

解决方案

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

It will be hard to do without browser support. But you can use Google Static Maps API: https://developers.google.com/maps/documentation/staticmaps/

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

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

There is some projects to draw HTML DOM to canvas:

• HTML2Canvas： http://html2canvas.hertzen.com/index.html


• jsFeedback： http://hertzen.com/experiments/jsfeedback/

• HTML2Canvas: http://html2canvas.hertzen.com/index.html
• jsFeedback: http://hertzen.com/experiments/jsfeedback/

您还可以将JavaScript与某些服务器端解决方案（使用webkit）例如 phantomjs

You can also integrate javascript with some server-side solution (using webkit) for example phantomjs

代码示例： （了解详情此处）

Code example: (read more here)

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扩展程序来执行此操作：使用javascript进行Chrome截图扩展

这篇关于如何截取部分Google地图的屏幕截图使用JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！