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

将自定义Google地图转换为图片

1 个答案: