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

我通过API以及Google Maps API使用here.com地图。我有一个模式窗口，其中包含地图，我用一个按钮显示。Z-Index瓷砖/来自here.com的地图

的谷歌地图模式和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-索引问题，但我该如何改变？

//编辑创建引擎收录与.mapModal DIV中创建的内容：http://pastebin.com/J1XRhCMr

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

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

// EDIT3：我结束了一个'脏'的解决方法：在页面加载显示mapcontainer div与'加载数据...'，关闭在完成加载页面（here.com也被加载）后，它会正确显示每次点击。虽然我会接受map.getViewPort().resize()，因为我有强烈的感觉，这是正确的轨道！谢谢所有

来源

2016-04-15 PrimuS

听起来好像它们是在页面的其余部分之前呈现的。 [你可以用你的代码创建一个小提琴]（http://jsfiddle.net）？ – BDD

有两个问题：我对jsfiddle没有任何意见，第二，我无法添加凭据，所以它无法工作。我做了一个，但我甚至无法让模式显示。也许它仍然提供了一个提示？ https://jsfiddle.net/3rbgLh9b/1/ – PrimuS

您的浏览器的JavaScript控制台吐出任何错误？ –

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

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

来源

2016-04-18 13:28:31 echom

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

回答

相关问题