今天踩了一天的坑，最後終於將問題解決。假設當前OpenLayers地圖的容器div寬度和高度均爲600px,其地圖顯示效果如下圖所示：
現在動態改變地圖容器div的大小，改爲寬度600px，高度300px，可以發現地圖發生拉伸變形。如下圖所示：
解決方法如下：
setTimeout(function () {
map.updateSize();
}, 100);
全部代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title></title>
<link href="scripts/ol.css" rel="stylesheet" />
<script src="scripts/ol.js"></script>
</head>
<body>
<div id="map" style="width:600px;height:600px;"></div>
<button onclick="changeSize()">修改大小</button>
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.transform([120, 30], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
// 更改地圖容器大小
function changeSize() {
var div = document.getElementById('map');
div.style.height = '300px';
setTimeout(function () {
map.updateSize();
}, 100);
}
</script>
</body>
</html>
可以發現地圖正常顯示，沒有發生拉伸形變，如下圖所示：
