Come utilizzare lo screenshot di una parte di Google Maps utilizza JavaScript

Question

Sulla mia pagina, c'è un contenitore che utilizza l'API di Google Maps per visualizzare una mappa, c'è un pulsante sotto di esso, l'utente può trascinare la mappa in una posizione, quindi fare clic sul pulsante, mi piacerebbe prendere lo screenshot della mappa visualizzata nel contenitore ora e mostrarlo in una tela. È possibile farlo con puro JavaScript?

solo bisogno di supportare Chrome

Answer 1

Sarà difficile farlo senza il supporto del browser. Ma è possibile utilizzare mappe Google Static API: https://developers.google.com/maps/documentation/staticmaps/

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

---

Ci sono alcuni progetti per disegnare DOM HTML per tela:

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

Si può anche integrare JavaScript con qualche soluzione sul lato server (utilizzando WebKit), ad esempio phantomjs

Esempio di codice: (leggi tutto 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(); 
}); 

---

Se avete bisogno di una soluzione solo Chrome per specifiche gamma di utenti è possibile scrivere la propria estensione chrome per fare questo: Taking screenshot using javascript for chrome extensions