将自定义 google 地图转换为图像

Question

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

任何人都可以指出我如何解决这个问题的正确方向吗？如何在不使用静态地图 api 的情况下将 google 地图另存为图像？我的覆盖图如下所示：

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 地图 JavaScript API)。

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

将自定义 google 地图转换为图像

Convert custom google map into an image

javascript

google-maps

overlay

google-maps-api-3