6

このコードは、マップのdiv幅を最大にしますが、高さは0にします（％値は重要ではなく、常に0です）

<div id="map" style="width: 100%; height: 100%;"></div>

これは、マップのdivを固定サイズに設定するため機能しますが、明らかに私が望むものではありません。

<div id="map" style="width: 100%; height: 500px;"></div>

誰かがこれを経験しましたか？これを修正する方法についての提案はありますか？

私もjquery（-mobile）を使用しています

ありがとう

4

5 に答える 5

9

これは私の修正です：

function fixContentHeight(){
    var viewHeight = $(window).height();
    var header = $("div[data-role='header']:visible:visible");
    var navbar = $("div[data-role='navbar']:visible:visible");
    var content = $("div[data-role='content']:visible:visible");
    var contentHeight = viewHeight - header.outerHeight() - navbar.outerHeight();
    content.height(contentHeight);
    map.updateSize();
}
于 2012-10-16T09:09:26.100 に答える
5

HTMLと本文に100％の高さを与える必要があります。

html, body {
height: 100%;
}
于 2012-10-16T08:57:11.577 に答える
2

jqueryを使用する場合、これは、cssがマップに設定したものに関係なく、マップを保持しているコンテナdivにマップを「ストレッチ」するために完全に機能します。

   $(window).resize(function () {
      //$('#log').append('<div>Handler for .resize() called.</div>');
         var canvasheight=$('#map').parent().css('height');
         var canvaswidth=$('#map').parent().css('width');

         $('#map').css("height", canvasheight);
         $('#map').css("width", canvaswidth);

   });

これを早い段階で、理想的には$（document）.ready（function（）{/*ここ*/}ブロックで呼び出します。

于 2012-10-16T21:12:05.043 に答える
1

イオンタブ（ ionicframework）のマップの高さを100％に設定したかったので、このトピックに遭遇しました。これは元の質問ではありませんでしたが、おそらく他の人が同じ問題でこのトピックに遭遇します。前の提案に加えて、クラス.scrollの高さを100％に設定する必要があります。

html, body {
    width: 100%;
    height: 100%;
}

.scroll {
    height: 100%;
}

#map {
    height: 100%;
}
于 2016-09-07T13:50:10.597 に答える
-1

次を追加することで、ユースケースでこれを解決しました。

setInterval(function(){map.updateSize();}, 500);

更新：これは、OpenLayers 3で行っていることではありません。OpenLayers2を使用しているときにこれを行いました。きれいだとは言いませんが、必要なものには十分でした。

于 2015-02-26T22:06:21.903 に答える