靜態地圖：繪製多點的多邊形。 （2048字符限制）

Question

由於獲取請求中存在2048個字符的限制，因此您無法使用包含具有大量多邊形點的多邊形的Google靜態地圖生成圖像。

特別是如果您嘗試在一張地圖上繪製許多複雜的多邊形。 如果您使用Google Maps API，您將沒有任何問題 - 它效果非常好！ 但是我想要一張圖片（jpg或png）...

那麼，有沒有機會從Google Maps API創建圖片？或者「欺騙」2048字符限制的任何方式？

謝謝！

Answer 1

沒有辦法「欺騙」字符限制，但可以簡化折線以將編碼的折線字符串置於字符限制以下。這可能會或可能不會導致適合您的需求的多邊形保真度。

另外一個需要注意的是（據我所知）靜態地圖API只允許在地圖上繪製單個編碼折線（如果您自己關閉或填充它，它可能看起來像一個多邊形，但它仍然是多段線，而不是多邊形）。

簡化折線的一個選項是Douglas Peucker算法。以下是使用simplify方法擴展google.maps.Polyline對象的實現。

這依賴於加載Google地圖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庫。像

• http://html2canvas.hertzen.com/
• http://www.nihilogic.dk/labs/canvas2image/

的東西。雖然我不知道它是與覆蓋的谷歌地圖的性能。

編輯：如果您使用html2canvas，一定要籤這樣一個問題： https://stackoverflow.com/a/17816195/2279924

Answer 3

由於2016年9月的URL限制已更改爲8192個字符的大小。

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

還有一個feature request在被標記爲固定的公開問題追蹤。