Z-Index瓷砖/地图来自here.com

Question

我通过他们的API以及Google Maps API使用here.com地图。 我有一个包含地图的模态窗口，我用一个按钮显示。

Google Maps模式和here.com模式具有完全相同的css：

.mapModal{
   height:calc(100% - 50px);
   width:calc(100% - 250px);
   top:52px;
   left:250px;
   padding:5px;
   position:fixed;
   display:none;
   border: 1px solid #c2c2c2;
   z-index:3;
}

现在，当我展示Google地图时，它看起来像这样：

但是当我用here.com地图打开模态时，它看起来像这样：

您可以看到控件（左上角）和这里的徽标（左下角），我可以实际使用控件（缩放，更改测量等）。只显示实际的图块。 他们确实加载了。 我认为这是一个z索引问题，但我怎么能改变呢？

// EDIT使用.mapModal div中创建的内容创建了一个pastebin： http ： .mapModal

我看到两个带有z-index的div：0（第二级和第三级）但在浏览器的开发者视图中更改它也没有任何效果。

// EDIT2：将问题跟踪到以下内容：如果div可见，则第一次初始化有效。 然后我可以打开和关闭它，它会正确更新。 如果在初始化时隐藏包含div，它将不会呈现...

// EDIT3：我最终得到了一个'脏'的解决方法：在pageload上显示mapcontainer div并加载'loading data ...'，在完成加载页面后关闭（here.com也加载了），然后它会正确显示每次点击。 将接受map.getViewPort().resize() ，因为我有一种强烈的感觉，这是正确的轨道！ 谢谢大家

Answer 1

这里有一些有趣的东西：在你的pastebin提取中，我可以看到画布的大小为0x1像素。 在我看来，地图在初始化时无法正确测量容器的尺寸。 它也不会自动更新大小。

你能检查一下是否调用map.getViewPort（）。 显示地图模式后调整大小（） ？