在 google 地图 javascript 下拍摄特定区域的快照

Question

我正在尝试拍摄 google 地图上绘制的矩形包围的区域的快照。是否可以拍摄矩形下方区域的快照？我搜索了答案，但找不到任何有用的信息。

Rectangle drawn on the map

我尝试通过指定地图中心、缩放级别、图像宽度和图像高度来使用静态地图 API 拍摄矩形下方区域的快照。喜欢 https://maps.googleapis.com/maps/api/staticmap?center=CENTER 矩形&zoom=地图的缩放级别&size=矩形的宽度和高度&maptype=satellite&key=API KEY

这是我试过的代码，

var zoom = map.zoom;
var centre = rectangle.getBounds().getCenter(); //rectangle is the shape drawn on the map
var spherical = google.maps.geometry.spherical;
bounds = rectangle.getBounds(); //rectangle is the shape drawn on the map
cor1 = bounds.getNorthEast();
cor2 = bounds.getSouthWest();
cor3 = new google.maps.LatLng(cor2.lat(), cor1.lng()); 
cor4 = new google.maps.LatLng(cor1.lat(), cor2.lng()); 
width = spherical.computeDistanceBetween(cor1,cor3); 
height = spherical.computeDistanceBetween( cor1, cor4);

现在我用这个URL,

下载了图片

"https://maps.googleapis.com/maps/api/staticmap?center=" + centre.lat() + "," + centre.lng() + "&zoom=" + zoom + "&size=" + width + "x" + height + "&maptype=satellite&key=API_KEY"

原文URL：“https://maps.googleapis.com/maps/api/staticmap?center=40.804197008355914,-74.11213619168848&zoom=20&size=26x37&maptype=satellite&key=API_KEY”

Output image I got

My expected output

我得到了图像，但是图像没有包括矩形包围的整个区域（它太小了）。我做错了什么？还有其他方法吗？

Answer 1

您代码中的主要错误是静态地图 API 的 width 和 height 参数必须以像素为单位。目前，您以米为单位计算距离并将其传递到静态地图 URLs 而不是像素。

我根据您的示例代码创建了一个示例，并且能够创建正确的静态地图 URL。请看看我的例子。 distanceInPx 函数是最重要的。使用绘图管理器创建矩形并单击显示静态地图 link。另请注意，静态地图 API 在标准计划中限制为 640x640 像素的图像大小，因此您无法为尺寸更大的矩形创建 link。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 28.45765, lng: -16.363564},
    zoom: 21,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['rectangle']
    }
  });
  drawingManager.setMap(map);

  google.maps.event.addListener(drawingManager, "rectanglecomplete", function(rectangle){
    function distanceInPx(pos1, pos2) {
        var p1 = map.getProjection().fromLatLngToPoint(pos1);
        var p2 = map.getProjection().fromLatLngToPoint(pos2);

        var pixelSize = Math.pow(2, -map.getZoom());

        var d = Math.sqrt((p1.x-p2.x)*(p1.x-p2.x) + (p1.y-p2.y)*(p1.y-p2.y))/pixelSize;

        return Math.round(d);
    }

    var zoom = map.zoom;
    var centre = rectangle.getBounds().getCenter(); //rectangle is the shape drawn on the map
    var spherical = google.maps.geometry.spherical;
    bounds = rectangle.getBounds(); //rectangle is the shape drawn on the map
    var cor1 = bounds.getNorthEast();
    var cor2 = bounds.getSouthWest();
    var cor3 = new google.maps.LatLng(cor2.lat(), cor1.lng()); 
    var cor4 = new google.maps.LatLng(cor1.lat(), cor2.lng()); 

    var width = distanceInPx(cor1, cor4);
    var height = distanceInPx(cor1, cor3); 

    var imgUrl = "https://maps.googleapis.com/maps/api/staticmap?center=" + 
        centre.lat() + "," + centre.lng() + "&zoom=" + zoom + 
        "&size=" + width + "x" + height + "&maptype=satellite&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU";

    var aElem = document.getElementById("staticLink");
    aElem.setAttribute("href", imgUrl);
    aElem.style.display="block";

  });

}

#map {
  height: 100%;
}
html, body {
  height: 95%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
    <a id="staticLink" href="#" target="_blank" title="Show static map" style="display:none;">Show static map</a>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&libraries=drawing&callback=initMap"
         async defer></script>

jsbin 也提供了这个例子：http://jsbin.com/humuko/edit?html,output

希望对您有所帮助！

在 google 地图 javascript 下拍摄特定区域的快照

Take snapshot of a specific area under google map javascript

javascript

google-maps

google-maps-api-3

google-static-maps