Question

我正在尝试实现openlayers 3的并排示例：http://heiri.5cz.de/test.html，但不会显示DOM呈现的地图版本。我在Windows 8.1下使用Internet Explorer 11打开页面。我错过了什么？

test.html的内容：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>Side-by-side example</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.4.0/resources/bootstrap/css/bootstrap.min.css" type="text/css">
<script src="http://openlayers.org/en/v3.4.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.4.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.4.0/build/ol.js"></script>

<link rel="stylesheet" href="http://openlayers.org/en/v3.4.0/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">


</head>
<body>
<div class="container-fluid">

<div class="row-fluid">
  <div class="span4">
    <h4>Canvas</h4>
    <div id="canvasMap" class="map"></div>
  </div>
  <div class="span4">
    <h4>WebGL</h4>
    <div id="webglMap" class="map"></div>
    <div id="no-webgl" class="alert alert-error" style="display: none">
      This map requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
    </div>
  </div>
  <div class="span4">
    <h4>DOM</h4>
    <div id="domMap" class="map"></div>
  </div>
</div>

</div>
<script>
var domMap = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.MapQuest({layer: 'sat'})
    })
  ],
  renderer: 'dom',
  target: 'domMap',
  view: new ol.View({
    center: [0, 0],
    zoom: 1
  })
});

if (ol.has.WEBGL) {
  var webglMap = new ol.Map({
    renderer: 'webgl',
    target: 'webglMap',
    layers: domMap.getLayers(),
    view: domMap.getView()
  });
} else {
  var info = document.getElementById('no-webgl');
  /**
   * display error message
   */
  info.style.display = '';
}

var canvasMap = new ol.Map({
  target: 'canvasMap',
  layers: domMap.getLayers(),
  view: domMap.getView()
});

</script>
</body>
</html>

＆＃13;

Answer 1

问题是你的地图div没有高度。

如果您查看http://openlayers.org/en/v3.4.0/examples/side-by-side.html并使用自己喜欢的开发工具检查页面，您会发现地图div有高度。

示例和ol3的side-by-side.html示例之间的区别在于side-by-side.html示例使用的layout.css文件。

并排示例不显示DOM

1 个答案: