Z-Index of tiles /地图来自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;
}

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

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

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

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

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

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

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

Answer 1

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

在显示地图模式有帮助后，您可以检查是否调用map.getViewPort（）。resize()吗？