将自定义谷歌地图转换为图像

Question

我遇到了以下问题。我有一个谷歌地图，我在所有瓷砖上应用自定义叠加层。地图在浏览器中完美运行，但对于每个兴趣点，我需要在不同页面上显示带有标记的图像。为了实现这一点，大多数人使用 Google Static Map API，但自定义图块叠加似乎不支持（因为它无法在图像中呈现叠加）。不幸的是，经过搜索，静态地图 api 似乎不支持自定义地图类型。

谁能指出我如何解决这个问题的正确方向？如何在不使用静态地图 api 的情况下将谷歌地图保存为图像？我的叠加层如下所示：

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

希望这会有所帮助。

Answer 1

如果您需要自动化生成图像的过程，像 PhantomJS 这样的工具可以帮助您编写脚本来自动截取网页的屏幕截图（您使用 Google Maps JavaScript API 绘制的）。

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