如何使用 JavaScript 截取部分谷歌地图的截图

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11590620/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 06:27:05  来源:igfitidea点击:

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

javascriptgoogle-mapscanvas

提问by wong2

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?

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

Just need to support Chrome

只需要支持Chrome

回答by rogal111

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

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

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

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



There is some projects to draw HTML DOM to canvas:

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

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

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

您还可以将 javascript 与一些服务器端解决方案(使用 webkit)集成,例如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();
});


If you need only chrome solution for specific range of users you can write your own chrome extension to do this: Taking screenshot using javascript for chrome extensions

如果您只需要针对特定​​用户范围的 chrome 解决方案,您可以编写自己的 chrome 扩展来执行此操作:使用 javascript 进行 chrome 扩展的截屏