私はコンテナとして以下を使用している場合、コンテナの幅/高さ

Question

に割合を使用している場合は、ここでマップをレンダリングすることができません、

<div style="width: 1200px; height: 600px; margin:0 auto;" id="mapContainer"></div> 

ので、マップが正しくレンダリングされます。

が、私は修正幅または高さを使用したくないので、私はそれがクラスを使用するように変更

.here-maps { 
    width: 100%; 
    padding-bottom: 56.25%; 
    margin:0 auto; 
} 

divがすべて空白になっています。私はそれがレンダリングされていることを見ることができますが、表示されません。

<div class="here-maps" id="mapContainer" ng-show="showMap" style=""><div style="position: relative; width: 100%; height: 100%; overflow: hidden; -webkit-tap-highlight-color: transparent;"><div style="z-index: 0; width: 100%; height: 100%; position: absolute; touch-action: none;"><div style="position: absolute; height: 100%; width: 100%; z-index: 0;"><canvas width="1371" height="1" style="position: absolute; left: 0px; top: 0px; width: 1371px; height: 0px;"></canvas><div style="position: absolute; width: 1371px; height: 0px;"></div></div></div><div style="position: absolute; bottom: 4em; left: 0.5em; z-index: 1; height: 0px; direction: ltr; color: rgb(51, 51, 51); font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 11px; line-height: normal; font-family: Arial, sans-serif;"><div style="position: absolute; top: 0px; pointer-events: none;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="3em" height="2.2em" viewBox="0 0 540 430"><path d="M 0,303 127,430 h 77 l -53,-53 c -19,-18 -24,-31 -13,-43 8,-9 18,-8 30,3 l 64,65 39,-39 -69,-70 c -28,-28 -55,-34 -81,-7 -16,15 -18,30 -17,44 L 38,265 0,303 z m 322,-97 c -41,-41 -79,-43 -113,-9 -34,34 -28,77 5,110 41,41 86,34 120,0 17,-16 26,-31 30,-41 l -34,-19 c -5,9 -12,20 -21,28 -19,19 -36,19 -48,9 l 70,-69 -9,-8 z m -85,57 c -11,-12 -11,-26 0,-37 11,-11 24,-11 38,0 l -38,37 z m 138,-3 39,-39 -42,-42 C 337,145 347,127 355,119 361,113 367,109 371,108 L 339,71 c -2,1 -7,5 -12,9 -13,14 -17,35 -13,49 L 297,114 263,148 374,260 z M 494,34 C 453,-8 415,-10 381,25 c -33,33 -25,79 6,109 41,41 85,35 119,1 20,-20 30,-39 32,-48 L 505,68 c -4,9 -13,24 -24,34 -18,19 -36,19 -48,9 L 503,42 494,34 z m -85,57 c -11,-12 -11,-26 0,-37 11,-11 24,-11 37,0 l -37,37 z" style="fill: rgb(27, 70, 141);"></path></svg></div><div style="-webkit-user-select: none; position: relative; top: 2.2em; padding-left: 1px;"><span unselectable="on">© 1987–2016 HERE | </span><a target="_blank" href="http://here.com/terms" style="color: inherit;">Terms of use</a><span style="color: inherit; display: none;"> | <a target="_blank" style="color: inherit;">Report image</a></span></div></div><div class="H_ui"><div class="H_l_top H_l_left"><div class="H_l_anchor H_l_horizontal"></div><div class="H_l_anchor H_l_vertical"></div></div><div class="H_l_top H_l_right"><div class="H_l_anchor H_l_horizontal"></div><div class="H_l_anchor H_l_vertical"></div></div><div class="H_l_bottom H_l_left"><div class="H_l_anchor H_l_vertical"></div><div class="H_l_anchor H_l_horizontal"></div></div><div class="H_l_bottom H_l_right"><div class="H_l_anchor H_l_vertical"></div><div class="H_l_anchor H_l_horizontal"><div class="H_ctl H_scalebar" title="Change to miles" style="direction: ltr;"><svg height="28" version="1.1" class="H_scalebar_svg" xmlns="http://www.w3.org/2000/svg" width="79"><polyline style="fill:none;stroke:white;stroke-width:4;stroke-opacity:0.8" points="2 19 2 26 77 26 77 19"></polyline><polyline style="fill:none; stroke:black; stroke-width:2" points="2 20 2 26 77 26 77 20"></polyline><text style="stroke:white;stroke-width:2;stroke-opacity:0.8;text-anchor:end;font: bold 10px 'Lucida Grande','Lucida Sans Unicode',Arial,Helvetica,sans-serif" x="71" y="22">10000 km</text><text style="text-anchor:end;font: bold 10px 'Lucida Grande','Lucida Sans Unicode',Arial,Helvetica,sans-serif;color:black;" x="71" y="22">10000 km</text></svg></div><div class="H_ctl"><div class="H_btn" title="Choose view"><svg version="1.1" class="H_icon" viewBox="0 0 26 26"><polygon points="19,14 17,14 19,16 13,19 6,16 9,14 7,14 3,16 13,21 23,16"></polygon><polygon points="13,15 3,10 13,5 23,10"></polygon></svg></div><div class="H_overlay"><div class="H_rdo"><div class="H_rdo_title">Choose view</div><div class="H_rdo_buttons"><div class="H_btn H_active">Map view</div><div class="H_btn">Satellite</div><div class="H_btn">Terrain</div></div></div><div class="H_btn">Traffic conditions</div><div class="H_btn">Public transport</div><div class="H_btn">Show traffic incidents</div></div></div></div></div><div class="H_l_anchor H_l_top H_l_center H_l_horizontal" style="margin-left: 0px;"></div><div class="H_l_anchor H_l_left H_l_middle H_l_vertical" style="margin-top: 0px;"></div><div class="H_l_anchor H_l_right H_l_middle H_l_vertical" style="margin-top: -40px;"><div class="H_ctl H_zoom H_grp"><div class="H_btn" title="Zoom in"><svg class="H_icon" viewBox="0 0 25 25"><path d="M 18.5,11 H 14 V 6.5 c 0,-.8 -.7,-1.5 -1.5,-1.5 -.8,0 -1.5,.7 -1.5,1.5 V 11 H 6.5 C 5.7,11 5,11.7 5,12.5 5,13.3 5.7,14 6.5,14 H 11 v 4.5 c 0,.8 .7,1.5 1.5,1.5 .8,0 1.5,-.7 1.5,-1.5 V 14 h 4.5 C 19.3,14 20,13.3 20,12.5 20,11.7 19.3,11 18.5,11 z"></path></svg></div><div class="H_btn" title="Zoom out"><svg class="H_icon" viewBox="0 0 25 25"><path d="m 6.5,11 h 12 c .8,0 1.5,.7 1.5,1.5 0,.8 -.7,1.5 -1.5,1.5 H 6.5 C 5.7,14 5,13.3 5,12.5 5,11.7 5.67,11 6.5,11 z"></path></svg></div></div></div><div class="H_l_anchor H_l_bottom H_l_center H_l_horizontal" style="margin-left: 0px;"></div></div></div></div> 

私はまだサイズ変更シナリオの世話をしていません。 ヒント？

Answer 1

ng-showはブラウザが非同期にdivのサイズを再計算するようになっていますが、ここでのマップの実装は自動的にはサイズ変更されません。結果のHTMLでは、キャンバス要素（マップがレンダリングされる場所）の高さが1であることがわかります。これは間違いなく正しいサイズです。

マップdivがng-showの後にmap.getViewport（）.resize()を呼び出すと、地図のサイズが再計算されますか？

何か

$scope.$watch('showMap', function(shown) { 
    if(shown) map.getViewport().resize(); 
}); 

ようEDIT： 申し訳ありませんが、私はあなたのCSSで何が起こっているかを詳しく見て撮影している必要があります。私はあなたのコードをフィドルに入れました。実際、マップは正しいサイズでレンダリングされません。私の場合、mapContainerは0ピクセル高く、正しいです。 divは適用可能な高さを決して与えません - ちょうど56.25％のボトムパディング（何の50％ですか？）。だから、私はそれで遊んと、この思い付いた：

html, body { height: 100%; } 
.here-maps { 
    width: 100%; 
    height: 43.75%; 
    margin:0 auto; 
} 

まず、私はhtmlとbodyタグがウィンドウの高さを埋める作りました。次に、底面のパディングの代わりに高さ（100％-56.25％）を使用しました。それはあなたが探していたものに似ていますか？

https://jsfiddle.net/xv0Ly9ek/