javascript - 来自here.com的图 block / map 的Z索引

Question

我通过here.com map 的API 以及Google map API 使用 map 。我有一个包含 map 的模式窗口，并用一个按钮显示。

Google map 模式和 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 map 时，它看起来像这样:

但是当我使用here.com map 打开模式时，它看起来像这样:

您可以看到控件(左上)和此处的 Logo (左下)，我实际上可以使用这些控件(缩放、更改测量等)只有实际的瓷砖不显示。但它们确实会加载。我认为这是一个 z-index 问题，但我该如何改变它？

//编辑创建了一个pastebin，其中包含在.mapModal div中创建的内容:http://pastebin.com/J1XRhCMr

我看到两个 z-index:0 的 div(第 2 级和第 3 级)，但在浏览器的开发人员 View 中更改它也没有效果。

//EDIT2:跟踪问题如下:如果 div 可见，则第一个初始化有效。然后我可以打开和关闭它，它就会正确更新。如果初始化时包含的 div 被隐藏，它将不会渲染...

//EDIT3:我最终得到了一个“肮脏”的解决方法:在页面加载时显示带有“正在加载数据...”的mapcontainer div，在完成加载页面后关闭(here.com也被加载)，然后它将每次点击都能正确显示。不过，我会接受map.getViewPort().resize()，因为我有一种强烈的感觉，这是正确的轨道!谢谢大家

Answer 1

这里有一些有趣的事情:在您的 Pastebin 提取中，我可以看到 Canvas 的大小为 0x1 像素。在我看来， map 在初始化时无法正确测量容器的尺寸。它也不会自动更新尺寸。

你能检查一下是否调用了map.getViewPort()吗？ resize()显示 map 模式后有帮助吗？