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

2 つの間違いがあります。

  1. DIV 要素はJavaScript の前に配置するか、マップ作成コードを DOM Ready イベントに配置する必要があります。

  2. Yout div 要素に高さを設定する必要があります。

このフィドルを参照してください。

于 2012-10-03T12:54:24.203 に答える
0

ブラウザによっては、 を入れてみて、動かない場合は のようheightに固定幅をマップに入れてみてください。私はそれが奇妙であることを知っていますが、IEとクロムで表示されているがFFでは表示されていないマップでケースを取得しました。divwidth:400px;height:400px

于 2012-10-03T12:53:19.940 に答える