Làm cách nào để tạo nút hiển thị toàn màn hình để chuyển đổi trang bản đồ google của tôi thành toàn màn hình?

Question

Xin chào các bạn, tôi có một bản đồ google được tích hợp trên một phần của trang của tôi và tôi muốn tạo một nút bật/tắt để chuyển đổi bản đồ giữa toàn màn hình và kích thước bình thường. Vì vậy, khi bạn nhấp vào nó - bản đồ mở rộng để lấp đầy toàn bộ màn hình trình duyệt và nhấp vào nó một lần nữa nó được khôi phục lại kích thước ban đầu của nó trên trang. Tôi sẽ làm như thế nào?

Answer 1

Đây là triển khai jQuery.

$("#map_toggler").click(function() { 
    $("#map").toggleClass("fullscreen") 
}); 

Trong CSS:

#map { 
    width: 400px; 
    height: 200px; 
} 

#map.fullscreen { 
    position: fixed; 
    width:100%; 
    height: 100%; 
} 

chưa được kiểm tra, nhưng một cái gì đó dọc theo dòng mà nên làm việc.

Answer 2

Nếu bạn có bản đồ trên trang của mình, tất cả những gì bạn cần làm là viết một số javascript để thay đổi kích thước DIV giữ bản đồ. Tôi đã không thực hiện một ví dụ mà thay đổi kích thước DIV để điền vào trình duyệt, nhưng here là một trong đó Toggles kích thước của một div bản đồ từ javascript (tôi sử dụng mooTools để thiết lập style.width trên phần tử, nhưng bạn có thể sử dụng bất cứ điều gì bạn thích thao tác DOM).

Answer 3

khi nhấp chuột, bạn phải đổi kích thước div của mình nơi bạn đã hiển thị bản đồ ..... tôi nghĩ đơn giản là

Answer 4

On Dom sẵn sàng:

• Init bản đồ và thiết lập trung tâm
• Lấy kích thước CSS hiện hành của div chứa bản đồ

Mở nhập-fullscreen-nút bấm:

• Cập nhật CSS (kích thước và vị trí)
• Trình kích hoạt phương pháp bản đồ thay đổi kích thước
• trung tâm Set đồ

Mở lối kín màn hình-nút bấm:

• Cập nhật CSS (trở về kích thước ban đầu và vị trí)
• Kích hoạt các phương pháp bản đồ thay đổi kích thước
• Đặt trung tâm bản đồ

Bạn có thể tìm mã here

Answer 5

Bây giờ chúng tôi có một API toàn màn hình https://developer.mozilla.org/en/DOM/Using_full-screen_mode bạn chỉ cần chọn phần tử DOM bạn muốn đặt thành toàn màn hình và gọi API toàn màn hình trên đó. Một cái gì đó như thế này

var elem = document.getElementById("myvideo"); 
if (elem.requestFullScreen) { 
    elem.requestFullScreen(); 
} else if (elem.mozRequestFullScreen) { 
    elem.mozRequestFullScreen(); 
} else if (elem.webkitRequestFullScreen) { 
    elem.webkitRequestFullScreen(); 
}