Cách xem Google Maps ở chế độ "in"?

Question

Tôi đang sử dụng API Google Maps phiên bản 2 và tôi muốn có thể in bản đồ giống như cách Google thực hiện trên trang Bản đồ của nó.

Bạn có thể nhấp vào biểu tượng máy in nhỏ và nó tạo cửa sổ bật lên mới với cùng một bản đồ nhưng tất cả những thứ không thể in được (như các điều khiển) được lấy ra. Tôi biết rằng họ sử dụng @media print để đạt được hiệu ứng đó khi bạn nhấn "Xem trước bản in" hoặc "In" trong trình điều hướng. Tuy nhiên, cửa sổ bật lên không ở chế độ in.

Có cách nào để thực hiện thủ thuật ma thuật mà họ đang thực hiện, chẳng hạn như đặt loại phương tiện hiện tại thành "in"? Hoặc hoặc họ gian lận và thiết lập một phong cách CSS tùy chỉnh gian lận?

Tôi có plugin Silverlight và Google Map trên cùng một trang và tôi muốn có thể tạo cửa sổ bật lên chỉ chứa bản đồ sẵn sàng để in (như Google đang làm).

Nhờ có http://abcoder.com/google/google-map-api/print-button-for-google-map-api/ Tôi biết cách lấy nội dung HTML nhưng tôi chỉ có thể lấy nội dung với tất cả các điều khiển, v.v. (mà tôi không muốn).

Mọi trợ giúp sẽ được đánh giá cao.

Answer 1

Google bản đồ đặt một lớp gmnoprint trên tất cả các yếu tố mà họ không muốn in .. vì vậy thiết lập này để display:none trong file css in của bạn hoặc cửa sổ popup sẽ ẩn chúng ..

.gmnoprint{ 
    display:none; 
} 

Of'course điều này sẽ ẩn bất cứ điều gì google coi như không-cho-in ấn .. Nếu bạn muốn chọn các mục khác, bạn sẽ phải bằng cách nào đó phân tích mã html của họ: (

Answer 2

Một cách tiếp cận hữu ích khác để in bản đồ google là sử dụng Google Static Maps API. có thể tạo hình ảnh tĩnh dựa trên một loạt các thông số hiển thị (vị trí, mức thu phóng, kích thước, đánh dấu vv ...) và bao gồm hình ảnh đó trong trang xem bản in của bạn.

Answer 3

Tôi đã gặp sự cố tương tự với lớp phủ hình ảnh bản đồ tùy chỉnh được thêm qua kml. Gaby của đầu lên về lớp học gmnoprint là chìa khóa. Trong trường hợp của tôi, div với lớp gmnoprint được áp dụng là phụ huynh trực tiếp của phần tử img của tôi đã biến mất. Về cơ bản tôi đã tạo liên kết "tạo lớp phủ có thể in":

$("#printable-map").click(function() { 
     if($(this).text() == "Include overlay when printing") { 
      $(this).text("Exclude overlay when printing"); 
      $("[src$=blah.png]").parent().removeClass("gmnoprint"); 
     } else { 
      $(this).text("Include overlay when printing"); 
      $("[src$=blah.png]").parent().addClass("gmnoprint"); 
     } 
    }); 

Đã thử nghiệm và hoạt động trong Safari, FF và Chrome.