Open Layer基本示例不起作用

Question

代码：

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script type="text/javascript">
    map = new OpenLayers.Map("open_map");
    map.addLayer(new OpenLayers.Layer.OSM());

    var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );

    var zoom=16;

    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);

    markers.addMarker(new OpenLayers.Marker(lonLat));

    map.setCenter (lonLat, zoom);
  </script>
<div id="open_map" style="width:100%"></div>

我使用的是官方网站示例，但它不适用于我，它不会在浏览器中显示任何地图。

我在控制台中没有错误，奇怪......任何想法？

EDITED

<div id="open_map" style="width:100%;height:300px;position:relative;"></div>
 <script type="text/javascript">
    map = new OpenLayers.Map("open_map");
    map.addLayer(new OpenLayers.Layer.OSM());

    var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );

    var zoom=16;

    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);

    markers.addMarker(new OpenLayers.Marker(lonLat));

    map.setCenter (lonLat, zoom);
  </script>

在div元素之后移动脚本现在我看到了：

Answer 1

你有两个错误：

1. DIV元素必须在您的javascript之前 ，或将地图创建代码放在DOM ready事件中。

2. 您必须将高度设置为yout div元素。

请参阅此fiddle。

Answer 2

您的问题是 Twitter Bootstrap 在img标记上设置了此属性：

img { max-width:100%; }

我想你想要在不打破整个主题的情况下使用Open Layers地图，所以你可以覆盖你的map div的指令。

示例：您的地图有一个class="map"的div，所以css是：

.map img { max-width:none; }

Answer 3

根据浏览器的不同，您可能需要尝试添加height，如果没有工作，请将修复宽度放在地图div上，如width:400px;height:400px。 我知道它很奇怪，但我在地图上显示了IE和Chrome但不是FF。