구글 맵 자바 스크립트에서 특정 영역의 스냅 샷 찍기

코드에서 가장 큰 실수는 width 입니다.  그리고 height  Static Maps API의 매개 변수는 픽셀이어야합니다. 현재 거리를 미터 단위로 계산하여 픽셀 대신 정적지도 URL로 전달합니다.

샘플 코드를 기반으로 예제를 만들었고 올바른 정적지도 URL을 만들 수있었습니다. 내 예를 살펴보십시오. 와이즈 비즈  기능이 가장 중요합니다. 그리기 관리자를 사용하여 사각형을 만들고 정적지도 표시 링크를 클릭하십시오. 또한 정적지도 API는 표준 계획에서 640x640 픽셀 이미지 크기로 제한되므로 더 큰 크기의 사각형에 대한 링크를 만들 수 없습니다.

distanceInPx

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

이 예제는 jsbin에서도 사용 가능합니다 : http://jsbin.com/humuko/edit?html,output

이것이 도움이되기를 바랍니다!