地图不会使用 openlayer 显示

Question

我正在尝试使用 openlayer 来显示地图，但没有显示任何内容，我只能看到一个白页，这是我的代码

     <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
  function init() {

      map = new OpenLayers.Map("basicMap");

      var mapnik = new OpenLayers.Layer.OSM();
      var  epsg4326 =  new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
      var projectTo = new OpenLayers.Projection("EPSG:900913"); //The map projection (Spherical Mercator)

      map.addLayer(mapnik);
    map.setCenter(new OpenLayers.LonLat(-7.62300,33.59349) // Centre de la carte
      .transform(epsg4326,projectTo
      ), 12 // Zoom level
    );
  }
  </script>
 </head>
 <body onload="init();">
    <div id="basicMap" style="width:100%; height:80%"></div>
 </body>
  </html>

谢谢

Answer 1

您必须为地图定义高度 div:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
function init() {

  map = new OpenLayers.Map("basicMap");

  var mapnik = new OpenLayers.Layer.OSM();
  var  epsg4326 =  new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
  var projectTo = new OpenLayers.Projection("EPSG:900913"); //The map projection (Spherical Mercator)

  map.addLayer(mapnik);
  map.setCenter(new OpenLayers.LonLat(-7.62300,33.59349).transform(epsg4326,projectTo), 12);
}
  </script>
</head>
<body onload="init();">
  <div id="basicMap" style="width:100%; height:100px"></div>
</body>
</html>

地图不会使用 openlayer 显示

the map wont show up using openlayer

javascript

openlayers

openstreetmap