4

ローカルマップサービスを使用する必要があるこの OpenLayers プロジェクトを取得しました。

私が遭遇している問題: (スクリーンショット) http://tinypic.com/r/x38oq1/6

テスト目的で空白の Web ページ (空白のページは地図のみのページ) で 100% 同一のコードを使用しているため、これは私にとってそれ自体がなぞなぞです。(スクリーンショット: http://tinypic.com/r/20zyxxh/6 )

私は OpenLayers 10.12 (7 月 26 日までに最新の安定版) を使用しています。また、ブートストラップ twitter で codeigniter Framework を使用しています。

ガイド/チュートリアルと同じマップサーバーを使用すると、マップはうまく表示されますが、ローカル マップ フォルダーに切り替えると失敗します。

JavaScript コード:

      <script defer="defer" type="text/javascript">
    var map = new OpenLayers.Map('map');
    var tms = new OpenLayers.Layer.OSM( 
        "OSM Layer",
        "./assets/map/WholeWorld256-8bit/${z}/${y}-${x}.png",
        {layers: 'basic'} );
    map.addLayer(tms);
    map.zoomToMaxExtent();
  </script>

なぜこのように動作するのか誰かが考えているなら、それは素晴らしいことです!

IRC チャンネルも試しましたが、応答がありませんでした。

4

2 に答える 2

7

だから私は問題の解決策を見つけました.他の誰かが同じ問題に遭遇した場合は投稿します.

問題は、Bootstrap の Twitter スタイルにあります。しかし、Twitter チームはこの問題を修正する ID タグを作成しました。ID="map_canvas" を使用すると問題が解決します。

マップのタイルにある種の最大幅を設定するコード:

Bootstrap.css - 行 64-74:

img {
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

解決策は 76 ～ 78 行目 (boostrap.css) にあります。

#map_canvas img {
  max-width: none;
}

これが他の誰かに役立つことを願っています! 良い１日を！

于 2012-07-27T07:01:51.197 に答える
0

同じ問題に遭遇しましたが、OpenLayers コンテナーの ID を変更したくありませんでした。同じ CSS ルールを使用して、任意の div を修正できます。

<style>#mapCanvas img { max-width:none; } /* make Boorstrap work with OpenLayers */</style>
于 2012-12-12T01:02:52.950 に答える