单页面多地图

一个页面加载多个地图，用于对比。如何实现单页面多地图互不干扰呢？
Openlayer：学习笔记之简单的ol.Map应用_html

<!Doctype html>
<html>
<head>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>OpenLayers 地图示例</title>
    <link href="ol.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="ol.js" charset="utf-8"></script>
</head>
<body>
<p>地图1</p>
<div id="map1" style="width: 100%;height: 400px"></div>
<p>地图2</p>
<div id="map2" style="width: 100%;height: 400px"></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>
</body>

</html>
地图联动

OpenLayers 3采用了MVC模型，V对应的就是View，这种设计模型有什么好处？
Openlayer：学习笔记之简单的ol.Map应用_javascript_02
调整地图1的缩放尺度，地图2也会一同变化。

<!Doctype html>
<html>
<head>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>OpenLayers 地图示例</title>
    <link href="ol.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="ol.js" charset="utf-8"></script>
</head>
<body>
<p>地图1</p>
<div id="map1" style="width: 100%;height: 400px"></div>
<p>地图2</p>
<div id="map2" style="width: 100%;height: 400px"></div>
<script>
    // 创建一个视图
    const view = new ol.View({
        center: [0, 0],
        zoom: 2
    });

    // 创建第一个地图
    new ol.Map({
        layers: [
            new ol.layer.Tile({source: new ol.source.OSM()})
        ],
        view: view,
        target: 'map1'
    });

    // 创建第二个地图
    new ol.Map({
        layers: [
            new ol.layer.Tile({source: new ol.source.OSM()})
        ],
        view: view,
        target: 'map2'
    });
</script>
</body>

</html>

原因：两个ol.map共用了一个view。

动态交换地图

在创建地图时，我们可以指定对应的地图容器，其实在创建完成之后，我们还可以动态设置不同的地图容器，从而可以让地图不断的变换位置，比如交换两个地图：
Openlayer：学习笔记之简单的ol.Map应用_css_03
点击调换地图后：
Openlayer：学习笔记之简单的ol.Map应用_html_04
方法：使用setTarget方法实现