Here api 如果容器使用宽度/高度百分比，则无法在此处渲染贴图

如果我使用以下内容作为容器

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

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>

©1987–2016此处| |报告图像10000公里10000公里选择视图地图视图卫星地形图局内条件公共交通显示交通事故

我还没有考虑调整大小的方案。

---

有什么提示吗？

我认为问题在于ng show将异步使浏览器重新计算div的大小，但HERE map实现不会自动调整大小。在生成的HTML中，您可以看到canvas元素（在其中渲染贴图）的高度为1，这绝对不是正确的大小

在map div为

ng show

n之后，可以尝试调用map.getViewport（）使地图重新计算其大小吗

差不多

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

编辑： 对不起，我应该仔细看看你的CSS是怎么回事。我把你的代码放在一把小提琴里，事实上地图没有以正确的大小渲染。对我来说，mapContainer是0像素高，这是正确的。div从来没有达到它所能达到的高度——只是一个56.25%的底部填充物（但是百分之五十多？）。因此，我对它进行了研究，得出了以下结论：

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

首先，我让html和body标记填充窗口的高度。然后，代替底部填充，只使用高度（100%-56.25%）。这和你要找的一样吗

---

谢谢你的回答。但我不认为这是ng秀的原因。我已经取消了ng秀，但还是一样。看起来像是当宽度/高度使用百分比时，地图无法正确显示。

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