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的地圖

回答

相關問題