2012-09-03 1 views
6

Google지도가있는이 웹 브라우저보기가 있습니다. 당신으로미디어 인쇄 사용 방법, google maps

print view

:

browser view

그럼 내가 다음 페이지 인쇄 또는 인쇄보기를 사용할 때 나는이 얻을 일부 @media 인쇄 스타일

<style type="text/css"> 
     @media print 
     { 
     body{font-family:georgia,times,sans-serif;} 
     img{max-width:500px;} 
     #headerblock{display:none;} 
     #navigationblock{display:none;} 
     #thewaydiv{display:block;} 
     #footerblock{display:none;} 
     #contentmap{min-height:100px; position:relative; width:100%;} 
     #map{border-bottom:0px; border-left:0px; border-top:0px; border-right:0px; height:250px; margin-top:0px; width:100%;} 
     } 
    </style> 

을 추가 한 Google지도가 페이지 크기만큼 괜찮은지 확인할 수는 있지만 크기가 너무 크거나 실제 이미지의 일부에 지나지 않습니다. 이 문제를 어떻게 해결할 수 있습니까? 그러면 Print View에서 브라우저보기와 같은 Google 이미지를 얻을 수 있습니까?

답변

2

CSS를 사용하여 수행 할 수 없습니다.

지도를 인쇄 할 때 특수한 페이지가 필요하거나 인쇄하기 전에지도를 축소해야합니다 (javascript를 사용하여 수행 할 수 있음).

1

동적 데이터 기반지도에서도이 문제가 발생했습니다. 그러나 나는 css를 사용하여 API 또는 clunky separate map 페이지를 사용하여 맵을 조작하지 않고도이 작업을 좀더 부드럽게 할 수있는 방법을 찾았습니다.

나는 컨테이너 div에 정의 된 높이를 지정하고 css 오버플로를 hidden으로 설정했습니다. 동일한 설정을 사용하지만 700px 너비와 500px 높이와 같은 인쇄 가능한 크기가있는 첫 번째지도 아래에 두 번째지도를 추가했습니다.

마지막으로 인쇄 스타일 시트에는 컨테이너에 두 번째 숨겨진지도를 표시하는 첫 번째지도의 display : none이 있습니다.

이게 이상한가요?
어쩌면,하지만 즉시 나를 나를 위해 일했다.