>

Google지도에 그려진 사각형으로 둘러싸인 영역의 스냅 샷을 찍으려고합니다. 사각형 아래 영역의 스냅 샷을 찍을 수 있습니까? 답변을 검색했지만 유용한 정보를 찾을 수 없습니다.

지도에 그려진 사각형

지도 중심, 확대/축소 수준, 이미지 너비 및 이미지 높이를 지정하여 정적 맵 API를 사용하여 사각형 아래 영역의 스냅 샷을 찍으려고했습니다. 처럼 https://maps.googleapis.com/maps/api/staticmap?center=CENTER RECTANGLE&zoom =지도의 줌 레벨 및 크기 = RECTANGLE의 너비와 높이&maptype = satellite&key = API 키

내가 시도한 코드는 다음과 같습니다.

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 = "+ 너비 +"x "+ 높이 +"&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 "

내가 얻은 출력 이미지

내 예상 결과

이미지가 있지만 이미지에 사각형으로 둘러싸인 전체 영역이 포함되어 있지 않습니다 (너무 작습니다). 내가 뭘 잘못하고 있니? 다른 방법이 있습니까?

  • 답변 # 1

    코드에서 가장 큰 실수는 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

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

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

관련 자료