2015-04-30 30 views
0

我试图用openlayer来显示地图,但没有被显示出来,所有我能看到的是一个白色的页面在这里是我的代码地图上不会出现使用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

您必须定义高度为您的地图格:

<!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> 
+0

谢谢您的回答它的工作原理,但我想知道为什么,因为我已经定义了一个高度 – ADA15

+1

您需要定义像素的高度不是百分比。 – Superdrac

+1

在dom负载中,您的div中没有​​任何内容。 100%没有什么是没有意义的......要为您的div预留空间,您需要修复两个值中的一个。 – Superdrac