ฉันได้สร้างเว็บเพจที่มีปุ่มเพื่อตั้งค่าแผนที่เต็มหน้าจอและกลับสู่รูปแบบปกติแผนที่ปัญหาไม่ได้ตั้งเป็นเต็มหน้าจอจนกว่าฉันจะเปลี่ยนขนาดหน้าต่างผลลัพธ์วิธีเอาชนะสิ่งนี้

คำแนะนำและความช่วยเหลือใด ๆ ที่มีความนิยม

นี่คือตัวอย่างการทำงาน: การสาธิต

เพิ่มmap.updateSize();ไปยังส่วนท้ายของ$("#btn-full-screen").click...

การสาธิต

อัพเดตเอกสารขนาด

ฟังก์ชั่นนี้ควรถูกเรียกใช้โดยรหัสภายนอกใด ๆ ที่เปลี่ยนขนาดของแผนที่ div (เพราะโมซิลล่าไม่ให้เราจับ“ onresize” สำหรับองค์ประกอบ)

คุณสามารถใช้OpenLayers.Map.updateSizeวิธีการวาดเลเยอร์ฐานของคุณใหม่เมื่อคุณขยายแผนที่ให้ใหญ่ที่สุด

ดังนั้นการเพิ่มฟังก์ชั่นเช่น:

var fullScreen = function () {
    map.baseLayer().redraw();
}

คุณจะต้องเพิ่มตัวเลือกเพิ่มเติมในแผนที่ของคุณเท่านั้น:

var map = new OpenLayers.Map({
    div: "map",
    center: new OpenLayers.LonLat(0, 0),
    updateSize: fullScreen,
    minResolution: "auto",
    minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),
    maxResolution: "auto",
    maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),
    projection: Mercator,
    displayProjection: Geographic
});

โชคดี!

เขียนรหัสต่อไปนี้เมื่อใดก็ตามที่คุณจำเป็นต้องวาดแผนที่เช่นบนหน้าต่างปรับขนาดหรือเปลี่ยนแท็บหรือเต็มหน้าจอหรือในเหตุการณ์อื่น ๆ ตามความต้องการของคุณ

$(window).trigger('resize');

สิ่งนี้จะทริกเกอร์updateSize()ฟังก์ชันภายในโดยอัตโนมัติ