0

代码：

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

我使用了官方网站示例，但它对我不起作用，它没有在浏览器中显示任何地图。

我在控制台中没有错误，奇怪......知道吗？

已编辑

<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 元素之后移动脚本：

在此处输入图像描述

4

3 回答 3

4

你有两个错误：

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

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

看到这个小提琴。

于 2012-10-03T12:54:24.203 回答
4

您的问题是Twitter Bootstrapimg在标签上设置了这个属性：

img { max-width:100%; }

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

示例：您映射有一个 div class="map"，所以 css 是：

.map img { max-width:none; }
于 2012-10-11T21:42:48.597 回答
0

根据浏览器的不同，您可能需要尝试将 aheight和如果不起作用，则将 fix width 放到地图上，div例如width:400px;height:400px. 我知道这很奇怪，但我在 IE 和 chrome 上显示的地图上找到了这个案例，但不是 FF。

于 2012-10-03T12:53:19.940 回答