Trung tâm Google Maps (V3) trên trình duyệt in

Question

Tôi có một bản đồ được đặt thành 100% chiều rộng của trang. Bản đồ có một điểm đánh dấu và được căn giữa trên điểm đánh dấu đó. Khi tôi in trình duyệt, tôi muốn bản đồ nằm ở giữa điểm đánh dấu. Đây là mã tôi đã viết để làm như vậy:

var lastPos = map.getCenter(); 
google.maps.event.addListener(map, "idle", function() { 
    lastPos = map.getCenter(); 
    console.log(lastPos.toString()); 
});  

google.maps.event.addDomListener(window, "resize", function() { 
    google.maps.event.trigger(map, "resize"); 
    map.setCenter(lastPos); 
    console.log("Re-center on " + lastPos.toString()); 
}); 

Thao tác này khi tôi kích thước lại trình duyệt, nhưng không hoạt động khi trình duyệt tự kích thước trước khi in. Nếu trình duyệt của tôi ở trên một độ rộng nhất định thì điểm đánh dấu sẽ được dịch chuyển hoàn toàn khỏi trang (ở bên phải) khi bản đồ được in.

Đây là trường hợp thử nghiệm của tôi: http://www-sf.talispoint.com/testmapprint.html

Answer 1

Bạn cần thêm @media in và cung cấp cho bản đồ kích thước khi in và sau đó bạn có thể làm những gì được giải thích bên dưới.

Khi bản đồ được in những gì xảy ra là góc trên cùng bên trái được giữ và bản đồ được điều chỉnh để vừa với kích thước in @media.

Nếu bạn muốn trung tâm giữ nguyên, bạn cần phải thay đổi thủ công trung tâm bản đồ. http://jsbin.com/owiwox/33 là một ví dụ về cách giải quyết vấn đề này.

Nó sử dụng một người biết lắng nghe cho các phương tiện truyền thông in được áp dụng sự kiện và điều chỉnh trung tâm của bản đồ sử dụng một tỷ lệ về cách bản đồ được thay đổi (làm nhỏ hơn)

Một điều mà bạn phải chăm sóc là bạn có thể phải làm cho trình duyệt này nhắm mục tiêu để làm cho nó hoạt động trên tất cả các trình duyệt (giải pháp này hoạt động tốt trong Chrome) Một nguồn lực tốt để làm cho nó hoạt động trên các trình duyệt là: http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/

các js mã từ ví dụ trên nghe yêu cầu in và thay đổi bản đồ sao cho góc trên cùng bên trái có cùng một trung tâm với bản đồ lớn.

Để cắt toàn bộ câu chuyện ngắn, đây là cách nó hoạt động

1. Bạn cần phải đặt trong tỷ lệ bản đồ vs bản đồ in (hoặc có được kích thước bằng cách chọn nó từ JS) Bạn chỉ định nó đến: var widthRatio = 2; var heightRatio = 3;

2. Bạn nghe cho phương tiện truyền thông in đang được áp dụng và chuyển trung tâm để nó không làm thay đổi

3. Sau khi bạn hoàn thành in, bạn phục hồi các thay đổi.

Vẫn còn ở đây bạn có vấn đề là một phần bản đồ sẽ bị cắt, nhưng không có giải pháp tốt ở đây vì gạch thu phóng -1 có thể không được lưu vào bộ nhớ cache nên khi bạn thu nhỏ để phù hợp với giới hạn bạn có thể không có gạch.

Answer 2

Có vẻ như vấn đề với 'in' hoặc 'máy in'.

Tôi đã làm một thử nghiệm:

1. tải bản đồ thử nghiệm và làm cho trình duyệt rất rộng

2. Print Preview và thấy vấn đề bạn mô tả

3. Nhưng: Tôi có thể thay đổi quy mô in từ 'Shrint to fit' (mặc định cho IE và FF) để nói 30% và có thể in bản đồ như được thấy trên màn hình.

Một suy nghĩ là:

Bạn có thể cố gắng sử dụng CSS khác cho in để hạn chế chiều rộng bản đồ div, nhưng tôi không chắc chắn nếu điều đó sẽ kích hoạt thay đổi kích thước của bản đồ đầu tiên (bạn có thể tham khảo đến bài đăng này: Javascript Event Handler for Print)