Konvertieren Sie benutzerdefinierte Google Map in ein Bild

Question

Ich habe mit folgendem Problem herausgefordert. Ich habe eine Google-Karte, ich verwende benutzerdefinierte Überlagerung über alle Kacheln. Karte funktioniert einwandfrei im Browser, aber für jeden Punkt von Interesse muss ich ein Bild mit Marker auf einer anderen Seite präsentieren. Um dies zu erreichen, verwenden die meisten Leute die Google Static Map-API , aber diese wird nicht unterstützt mit benutzerdefinierten Kachel-Overlay (weil es das Overlay im Bild nicht wiedergeben kann). Leider sieht es nach der Suche aus wie statische Karten, die benutzerdefinierte Kartentypen nicht unterstützt.

Kann mir jemand auf eine richtige Richtung zeigen, wie ich dieses Problem angehen kann? Wie kann ich Google Map als Bild speichern, ohne statische Map API zu verwenden? Mein Overlay sieht so aus:

function service (map, opts) { 
     opts = opts||{}; 
     opts.size = +opts.size || 512; 

     if(!mapType){ mapType = createStyle(opts); } 

     map.mapTypes.set('aaa', mapType); 
     map.setMapTypeId('aaa'); 

     return this; 
    } 

    function createStyle(opts){ 
     return new google.maps.ImageMapType({ 
      getTileUrl: function(coord, zoom) { 
       zoom--; 
       var normalizedCoord = getNormalizedCoord(coord, zoom); 
       if (!normalizedCoord) { return; } 

       var url = [ 
        'http://someUrl.com/api/MapTiles', 
        opts.tileVersion || 10030, 
        opts.size, 
        zoom, 
        normalizedCoord.x, 
        normalizedCoord.y, 
       ].join("/"); 

       return url; 
      }, 
      tileSize: new google.maps.Size(opts.size, opts.size), 
      maxZoom: 19, 
      minZoom: 14, 
      radius: 1738000, 
      name: 'aaa' 
     }); 
    } 

function getNormalizedCoord(coord, zoom) { 
     var y = coord.y; 
     var x = coord.x; 
     var tileRange = 1 << zoom; 

     if (y < 0 || y >= tileRange) { 
      return null; 
     } 

     if (x < 0 || x >= tileRange) { 
      x = (x % tileRange + tileRange) % tileRange; 
     } 
     return {x:x, y:y}; 
    } 

Hoffe, das hilft.

Answer 1

Wenn Sie den Prozess automatisieren müssen, der das Bild erzeugt, kann Ihnen ein Tool wie PhantomJS helfen, ein Skript zu schreiben, das automatisch einen Screenshot einer Webseite erstellt (die Sie mit der Google Maps JavaScript API erstellt haben).

http://phantomjs.org/screen-capture.html