来自 here.com 的图块/地图的 Z 索引答案

【问题标题】：Z-Index of tiles/map from here.com来自 here.com 的图块/地图的 Z 索引
【发布时间】：2016-04-21 18:01:00
【问题描述】：

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

Google 地图模式和 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-index 问题，但我该如何改变呢？

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

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

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

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

【问题讨论】：

听起来它们是在页面的其余部分之前呈现的。 Can you create a fiddle with your code?
这有两个问题：我不知道 jsfiddle，其次，我无法添加凭据，所以无论如何它都不起作用。我做了一个，但我什至无法显示模态。也许它仍然给出提示？ jsfiddle.net/3rbgLh9b/1
您的浏览器 javascript 控制台是否显示任何错误？
根本没有，如果我在一个从一开始就可见的 div 中渲染相同的东西（加载时不隐藏），它会像预期的那样工作......
那行得通。只需进入并查看代码即可。

标签： javascript jquery css here-api

【解决方案1】：

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

您能否检查在显示地图模式后调用 map.getViewPort().resize() 是否有帮助？

【讨论】：