Convert custom google map into an image

问题

I have been challenged with following problem. I have a google map, I apply custom overlay over all the tiles. Map works flawlessly in the browser, but for each point of interest I need to present an image with marker on a different page. To achieve this, most people use Google Static Map API, but that doesn't seem to be supported with custom tile overlay (because it cannot render the overlay in the image). Unfortunately after searching it looks like static maps api doesnt support custom map types.

Can anyone point me to a right direction of how I can approach this problem? How can I save google map as an image, without using static map api? My overlay looks like this:

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};
    }

Hope this helps.

回答1:

If you need to automate the process which produces the image, a tool like PhantomJS can help you write a script to automatically take a screenshot of a webpage (which you've drawn using the Google Maps JavaScript API).

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

来源：https://stackoverflow.com/questions/38487549/convert-custom-google-map-into-an-image

标签

javascript

google-maps

google-maps-api-3

overlay