Google Maps 또는 모든 div를 인쇄하는 방법

-1

내 웹 사이트의 Google지도 (페이지의 나머지 부분이 아님)를 인쇄하고 싶습니다. 여기에는 마커, 폴리 라인, 정보창이 포함됩니다.Google Maps 또는 모든 div를 인쇄하는 방법

일반적으로 window.print()을 사용하지만 전체 페이지를 인쇄합니다. 특정지도 또는 div 만 인쇄 할 수있는 방법이 있습니까?

사람들이 렌더링 된 div를 제외한 전체 페이지를 숨기고있는 것을 본 적이 있지만 과도한 것처럼 보입니다.

출처

2017-09-29 m.nachury

내가 html2canvas과 다른 창에서의 조합을 사용하여이 작업을 수행하는 방법을 발견했다 :

첫째, 나는 GoogleMap으로 (또는 사업부 렌더링 할)를 렌더링하는 html2canvas를 사용합니다.

지도 또는 div의 크기로 새 창을 열고 창 내부에 img 태그를 추가하고 이미지 데이터로 캔버스 URI (첫 번째 단계에서 렌더링 됨)를 제공합니다.

마지막으로 window.print()으로 팝업을 인쇄 한 다음 팝업을 닫습니다.

function printDiv(divId){ 
    // For GoogleMaps I ignore the helps messages (.gm-style-pbc) displayed over the GoogleMap 
    $(".gm-style-pbc").each(function(){this.setAttribute("data-html2canvas-ignore","true");}); 
    html2canvas($('#'+divId), 
    { 
    useCORS: true, // useCORS for GoogleMap or divs that use resources from outside the website 
     onrendered: function (canvas) { 
      // Can be tweaked to avoid popout being blocked 
      var myWindow=window.open("about:blank","popup"," width="+canvas.width+", height="+ canvas.height + "resizable=0,scrollbar=0"); 
      if (myWindow == null){ 
       //If popout has been blocked display a error message here 
      }else{ 
       //Creating empty window with rendred div image URI 
       var content = "<!DOCTYPE html>"; 
       content += "<html><head><title>Map</title></head><body>" 
       content += "<img src="+canvas.toDataURL()+"></img>" 
       content += "</body></html>" 
       myWindow.document.open() 
       myWindow.document.write(content); 
       myWindow.document.close(); 
       myWindow.focus(); 
       //Added a 500 ms timer before printing and closing as GoogleChrome sometimes didnt had time to render the image and printed a blank screen 
       setTimeout(function(){myWindow.print();myWindow.close();},500); 
      } 
     } 
    }); 
    }

몇 가지 참고 사항 : html2canvas는 웹킷 변환을 지원하지 않는 것처럼이 GoogleMap으로 렌더링

가 완벽하지

여기 (html2canvas lib 디렉토리 포함) 내 JS 함수이다. 심지어 API를 매핑하는 연결이 느린 경우, GoogleMap으로 배경이 불완전 할 수 있습니다에 useCORS와
(사용 html2canvas 프록시이 문제가 발생하는 경우)
다른 창에서 차단 될 수 있으며, 특히에 (사용자가 수동으로 허용 할 수있다 내 경험에서 파이어 폭스)

그것의 이익을 위해 내 프랑스어 응용 프로그램의 스크린 샷 :

출처

2017-09-29 09:37:27

Google Maps 또는 모든 div를 인쇄하는 방법

답변

관련 문제