Question

由于get请求中有2048个字符的限制，因此您无法使用包含具有大量多边形点的多边形的Google静态地图生成图像。

特别是如果您尝试在一张地图上绘制许多复杂多边形。如果你使用谷歌地图API，你将没有问题 - 它运作良好！但我想要一个图像（jpg或png）......

那么，有没有机会从Google Maps API创建图片？或者“欺骗”2048 char限制的任何方式？

谢谢！

Answer 1

无法“欺骗”字符限制，但可以简化折线以使编码的折线字符串低于字符限制。这可能会也可能不会产生适合您需求的多边形。

另外需要注意的是（据我所知）静态地图API只允许在地图上绘制单个编码折线（如果您自己关闭或填充它，这可能看起来像一个多边形，但它仍然是折线，而不是多边形）。

简化折线的一个选项是Douglas Peucker算法。下面是一个使用google.maps.Polyline方法扩展simplify对象的实现。

这依赖于加载Google Maps JS API，如果您使用静态地图，则可能不需要，但下面的代码可以轻松重写。

google.maps.Polyline.prototype.simplify = function(tolerance) {

    var points = this.getPath().getArray(); // An array of google.maps.LatLng objects
    var keep = []; // The simplified array of points

    // Check there is something to simplify.
    if (points.length <= 2) {
        return points;
    }

    function distanceToSegment(p, v, w) {

        function distanceSquared(v, w) {
            return Math.pow((v.x - w.x),2) + Math.pow((v.y - w.y),2) 
        }
        function distanceToSegmentSquared(p, v, w) {

            var l2 = distanceSquared(v, w);
            if (l2 === 0) return distanceSquared(p, v);

            var t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2;
            if (t < 0) return distanceSquared(p, v);
            if (t > 1) return distanceSquared(p, w);
            return distanceSquared(p, { x: v.x + t * (w.x - v.x), y: v.y + t * (w.y - v.y) });
        }

        // Lat/Lng to x/y
        function ll2xy(p){
            return {x:p.lat(),y:p.lng()};
        }

        return Math.sqrt(distanceToSegmentSquared(ll2xy(p), ll2xy(v), ll2xy(w))); 
    }

    function dp( points, tolerance ) {

        // If the segment is too small, just keep the first point. 
        // We push the final point on at the very end.
        if ( points.length <= 2 ) {
            return [points[0]];
        }

        var keep = [],  // An array of points to keep
            v = points[0], // Starting point that defines a segment
            w = points[points.length-1], // Ending point that defines a segment
            maxDistance = 0, // Distance of farthest point
            maxIndex = 0; // Index of said point

        // Loop over every intermediate point to find point greatest distance from segment
        for ( var i = 1, ii = points.length - 2; i <= ii; i++ ) {
            var distance = distanceToSegment(points[i], points[0], points[points.length-1]);
            if( distance > maxDistance ) {
                maxDistance = distance;
                maxIndex = i;
            }
        }

        // check if the max distance is greater than our tollerance allows 
        if ( maxDistance >= tolerance ) {

            // Recursivly call dp() on first half of points
            keep = keep.concat( dp( points.slice( 0, maxIndex + 1 ), tolerance ) );

            // Then on second half
            keep = keep.concat( dp( points.slice( maxIndex, points.length ), tolerance ) );

        } else {
            // Discarding intermediate point, keep the first
            keep = [points[0]];
        }
        return keep;
    };

    // Push the final point on
    keep = dp(points, tolerance);
    keep.push(points[points.length-1]);
    return keep;

};

这是在几个例子（here和here）的帮助下拼凑而成的。

现在，您可以使用原始折线并通过此函数以增加的容差输入它，直到生成的编码折线低于URL长度限制（这将取决于您传递给静态贴图的其他参数）。

这样的事情应该有效：

var line = new google.maps.Polyline({path: path});
var encoded = google.maps.geometry.encoding.encodePath(line.getPath());
var tol = 0.0001;
while (encoded.length > 1800) {
    path = line.simplify(tol);
    line = new google.maps.Polyline({path: path});
    encoded = google.maps.geometry.encoding.encodePath(path);
    tol += .005;
}

Answer 2

另一种方法是使用可以将画布内容转换为图像的JavaScript库。像

这样的东西

虽然我不确定它与具有叠加功能的googlemaps的性能。

编辑：如果您使用的是html2canvas，请务必查看以下问题： https://stackoverflow.com/a/17816195/2279924

Answer 3

截至2016年9月，网址限制已更改为8192个字符。

https://developers.google.com/maps/documentation/static-maps/intro#url-size-restriction

公共问题跟踪器中还有feature request被标记为已修复。

静态地图：绘制具有多个点的多边形。（2048 char限制）

3 个答案:

静态地图：绘制具有多个点的多边形。 （2048 char限制）

3 个答案:

静态地图：绘制具有多个点的多边形。（2048 char限制）