html2canvas로 이미지를 캡처 한 후 Google지도를로드 할 수 없습니다.

Question

html2canvas를 사용하여 Google지도 이미지를 캡처하고 싶지만 문제는 방향을 제외하고는 Google지도를 볼 수없는 이미지를 캡처하는 것입니다. 누군가 이걸로 나를 도와주세요. 아래 참조 이미지뿐만 아니라 나는이 코드를 첨부입니다.

function getScreenShot() { 

     html2canvas(document.querySelector("#map")).then(canvas => { 

     var img = canvas.toDataURL(); 
     window.open(img); 
     height=height, 
     width=width 

    }); 
} 

Before capturing image.

After capturing image.

Answer 1

왜 당신이 구글 맵의 staticmap 개념을 사용하지 않는? 정적 이미지를 사용하면 쉽게 이미지를 만들 수 있습니다. 같은 기능을 아래에서 볼 수 있습니다.

function getScreenShot() { 
    //google static map url 
    var staticM_URL = "https://maps.googleapis.com/maps/api/staticmap"; 

    //Set the Google Map Center. 
    staticM_URL += "?center=" + mapOptions.center.lat() + "," + mapOptions.center.lng(); 

    staticM_URL += "&size=520x650"; //Set the Google Map Size. 

    staticM_URL += "&zoom=" + mapOptions.zoom; //Set the Google Map Zoom. 

    staticM_URL += "&maptype=" + mapOptions.mapTypeId;//Set the Google Map Type. 

    //Loop and add Markers. 
    for (var i = 0; i < markers.length; i++) { 
     staticM_URL += "&markers=color:red|" + markers[i].lat + "," + markers[i].lng; 
    } 

    window.open(staticM_URL); 
} 

몇 가지 참조 URL이 도움이 될 것입니다. https://staticmapmaker.com/google/ https://www.aspsnippets.com/Articles/Take-Screenshot-Snapshot-of-Google-Maps-using-JavaScript.aspx