将自定义Google地图转换为图片 [英] Convert custom google map into an image

问题描述

我受到以下问题的挑战。我有谷歌地图，我在所有瓷砖上应用自定义覆盖。地图在浏览器中完美地工作，但对于每个感兴趣的地方，我需要在不同的页面上呈现带有标记的图像。为了实现这一点，大多数人使用 Google静态地图API，但似乎不支持自定义贴图覆盖（因为它无法渲染图像中的覆盖图）。不幸的是，搜索后，它看起来像静态地图api不支持自定义地图类型。

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.

任何人都可以指出我如何解决这个问题的正确方向？如何将Google地图保存为图片，而无需使用静态地图API？我的覆盖图如下所示：

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

希望这会有所帮助。

推荐答案

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

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

这篇关于将自定义Google地图转换为图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！