动态交换地图

在创建地图时，我们可以指定对应的地图容器，其实在创建完成之后，我们还可以动态设置不同的地图容器，从而可以让地图不断的变换位置，比如交换两个地图：

地图1

地图2

为了让两个地图有所差别，你可以先放大第一个地图，然后点击调换地图按钮，看一下效果。要实现这个功能，其实只需要使用setTarget方法即可：

<p>地图1</p>
<div id="map1" style="width: 100%"></div>
<p>地图2</p>
<div id="map2" style="width: 100%"></div>
<input type="button" onClick="swapMap();" value="调换地图" />
<script>
    // 创建第一个地图
  var map1 = new ol.Map({
        layers: [
            new ol.layer.Tile({source: new ol.source.OSM()})
        ],
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        }),
        target: 'map1'
  });

    // 创建第二个地图
    var map2 = new ol.Map({
        layers: [
            new ol.layer.Tile({source: new ol.source.OSM()})
        ],
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        }),
        target: 'map2'
  });

    function swapMap() {
        // 改变两个地图的容器
        map1.setTarget('map2');
        map2.setTarget('map1');
    }
</script>

其实很多时候，只需要多留意一下API文档里面的方法，了解功能，就可能实现意想不到效果。