自适配区域
在实际应用中，会有一些地图查找和标注的业务，比如查看成都市锦江区。而这时，地图所在区域可能是北京，我们需要能够让地图直接定位到锦江区，并且最大化完全地显示这块区域。下面就将演示这个功能。
点击地图下方的按钮显示成都，看看有什么效果。代码如下：
<body>
<div id="map" style="width: 100%"></div>
<input type="button" value="显示成都" onclick="fitToChengdu();" />
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],
view: new ol.View({
// 设置成都为地图中心
center: [104.06, 30.67],
projection: 'EPSG:4326',
zoom: 10
}),
target: 'map'
});
function fitToChengdu() {
// 让地图最大化完全地显示区域[104, 30.6, 104.12, 30.74]
map.getView().fit([104, 30.6, 104.12, 30.74], map.getSize());
}
</script>
</body>
只用了一行代码，ol.View的fit函数很强大，希望初学者能认真仔细的查看API文档，它的第三个参数还可以设置更多的选项，以适应更多的需要。关于更多的使用，参见官网例子Advanced View Positioning。