03-09.md

动态交换地图

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

<script type="text/javascript" src="../src/ol3.13.1/ol.js" charset="utf-8"></script>

地图1

地图2

<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>

为了让两个地图有所差别，你可以先放大第一个地图，然后点击调换地图按钮，看一下效果。要实现这个功能，其实只需要使用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文档里面的方法，了解功能，就可能实现意想不到效果。