Javascript 开放层基本示例不'；t工作

代码：

map=新的OpenLayers.map（“open_map”）；
addLayer（新的OpenLayers.Layer.OSM（））；
var lonLat=新OpenLayers.lonLat（-0.1279688,51.5077286）
.变换(
新OpenLayers.Projection（“EPSG:4326”），//从WGS 1984转换而来
map.getProjectionObject（）//到球形墨卡托投影
);
var=16；
var markers=新的OpenLayers.Layer.markers（“markers”）；
添加图层（标记）；
markers.addMarker（新OpenLayers.Marker（lonLat））；
map.setCenter（lonLat，zoom）；

我使用了官方网站的例子，但它不适合我，它在浏览器中不显示任何地图

我在控制台没有错误，奇怪。。。有什么想法吗

编辑

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

map=新的OpenLayers.map（“open_map”）；
addLayer（新的OpenLayers.Layer.OSM（））；
var lonLat=新OpenLayers.lonLat（-0.1279688,51.5077286）
.变换(
新OpenLayers.Projection（“EPSG:4326”），//从WGS 1984转换而来
map.getProjectionObject（）//到球形墨卡托投影
);
var=16；
var markers=新的OpenLayers.Layer.markers（“markers”）；
添加图层（标记）；
markers.addMarker（新OpenLayers.Marker（lonLat））；
map.setCenter（lonLat，zoom）；

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

---

根据浏览器的不同，您可能希望尝试放置

高度

，如果不工作，则将固定宽度放置到地图

div

中，如

宽度：400px；高度：400px

。 我知道这很奇怪，但我在IE和chrome的地图上看到了这个案例，但不是FF。

你有两个错误：

DIV元素必须在javascript之前，或者将地图创建代码放入DOM就绪事件中

必须为您的div元素设置一个高度

请参见此图。

您的问题是Twitter引导程序在

img

标记上设置了此属性：

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

我想您希望在不破坏整个主题的情况下使用OpenLayerMap，因此您可以为您的map div重写该指令

示例：您将一个div映射为

class=“map”

，因此css是：

img { max-width:100%; }

---

好把戏，但我有问题与层检查问题更新请；9@dfsq我认为有些层无法可视化，它的中间部分返回空白：/i我提供的JSFIDLE链接是否提供了这种奇怪的视图？看起来很适合我。@dfsq不，这是一个css问题，我想，我正在使用引导css。。。真的找不到发生了什么：/这非常有帮助，谢谢。多边形贴图、传单等都不受此影响，因此如果您切换到OpenLayers，这很容易错过……而且非常令人沮丧。

.map img { max-width:none; }