如何將地圖導出爲全屏方式（使用OpenLayer）？

我有下面的代碼和它完美：如何將地圖導出爲全屏方式（使用OpenLayer）？

<style> 
    .map { 
     width: 100%; 
     height: 350px; 
    } 
    </style> 

    <div id="map" class="map"></div> 

    /* Export map to PNG Format */ 
    var exportPNGElement = document.getElementById('pngFormat'); 

    if ('download' in exportPNGElement) { 
    exportPNGElement.addEventListener('click', function(e) { 
     map.once('postcompose', function(event) { 
     var canvas = event.context.canvas; 
     exportPNGElement.href = canvas.toDataURL('image/png'); 
     }); 
     map.renderSync(); 
    }, false); 
    } else { 
    var info = document.getElementById('no-download'); 
    /** 
    * display error message 
    */ 
    info.style.display = ''; 
    }

但現在，我想這一切都出口到全屏的方式。

我試着插入下面的代碼，但它不起作用。

canvas.width = window.innerWidth; 
canvas.height = window.innerHeight;

此外，我試圖調整div映射的大小，但沒有成功。

var maptoEdit = document.getElementById('map').innerHTML = "<div style='height:100%; width:100%'></div>";

來源

2015-03-02 Javier Muñoz

你的大小調整方式將只需填寫元素與空div。地圖的來源是什麼？ – charlietfl 2015-03-02 16:21:56

什麼不起作用？它可能會麻煩與'帆布'和百分比工作。 – A1rPun 2015-03-02 16:22:05

UPDATE：

最後，我能做到這一點在下方式：

//document.getElementById('map').style.width = $(window).width() + 'px'; // Returns width of browser viewport 
//document.getElementById('map').style.height= $(window).height() + 'px'; // Returns height of browser viewport 
document.getElementById('map').style.width = '1280px'; 
document.getElementById('map').style.height = '768px'; 
map.updateSize();

來源

2015-03-02 18:01:58

如何將地圖導出爲全屏方式（使用OpenLayer）？

回答

相關問題