Wie man den Screenshot eines Teils von Google Maps erstellt JavaScript verwenden

Question

Auf meiner Seite gibt es einen Container, der Google Maps API verwendet, um eine Karte anzuzeigen, gibt es eine Schaltfläche darunter, Benutzer kann die Karte an eine Position ziehen Klicken Sie auf die Schaltfläche, ich möchte jetzt den Screenshot der im Container angezeigten Karte erstellen und in einer Leinwand anzeigen. Ist es möglich, dies mit reinem JavaScript zu tun?

brauchen nur zu unterstützen Chrome

Answer 1

Es wird schwer sein, ohne Browser-Unterstützung zu tun. Aber Sie können Google Static Maps API verwenden: https://developers.google.com/maps/documentation/staticmaps/

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

---

Es gibt einige Projekte HTML DOM auf die Leinwand zu zeichnen:

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

Sie können auch Javascript, mit einigen serverseitige Lösung (mit Webkit) zum Beispiel phantomjs

Codebeispiel integrieren: (mehr lesen 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(); 
}); 

---

Wenn Sie für bestimmte nur Chrom-Lösung benötigen Bereich der Benutzer können Sie Ihre eigene Chrom-Erweiterung schreiben, um dies zu tun: Taking screenshot using javascript for chrome extensions