03-07.md

单页面多地图

在某些业务中，可能需要在一个页面中加载多个地图，用于对比，或者多个业务方面的同时展示。那么OpenLayers 3能否做到单页面多地图互不干扰呢？

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

地图1

地图2

<script> // 创建第一个地图 new ol.Map({ layers: [ new ol.layer.Tile({source: new ol.source.OSM()}) ], view: new ol.View({ center: [0, 0], zoom: 2 }), target: 'map1' });

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

}); </script>

试试两个地图都操作一下，确认相互之间是否有影响？对应的代码非常简单，无非就是数量多了一个，如下：

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

这段代码真没有什么需要解释的了。