地图不会出现使用openlayer

时间:2015-04-30 12:54:40

标签: javascript openlayers openstreetmap

我试图使用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>

谢谢

1 个答案:

答案 0 :(得分: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>