来自 here.com 的 tiles/map 的 Z 索引

Question

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

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;
}

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

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

您可以看到控件（左上角）和此处的徽标（左下角），我实际上可以使用控件（缩放、更改尺寸等）只有实际的瓷砖不显示。他们确实加载了。我认为这是一个 z-index 问题，但我该如何改变它？

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

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

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

//EDIT3：我最终得到了一个 'dirty' 解决方法：在页面加载时用 'loading data...' 显示地图容器 div，完成页面加载后关闭（here.com也被加载），那么每次点击它都会正确显示。不过，我会接受 map.getViewPort().resize()，因为我有一种强烈的感觉，这是正确的轨道！谢谢大家

Answer 1

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

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

来自 here.com 的 tiles/map 的 Z 索引

Z-Index of tiles/map from here.com

javascript

css

jquery

here-api