隱藏父 div 時，Google 地圖邊界/縮放不起作用

Question

我有一大頁用戶數據，這些數據經過格式化，便於使用手風琴區域。 單擊手風琴控件，將顯示相關信息。 再次單擊它，它會被隱藏。

其中一個手風琴內部有一個谷歌 map，帶有多個引腳。 當父手風琴div隱藏時，邊界/縮放無效。 當它可見時，邊界/縮放有效。

我只能想象 DOM 將折疊的父div設置為零高度，因此谷歌地圖在堆棧中一直將其“視為”為零，並相應地根據零高度和寬度設置邊界。

這是一個小提琴：

https://jsfiddle.net/wjebusfL/1/

默認設置是關閉手風琴。 當您單擊打開按鈕時，您將看到 map 包含兩個標記，但縮放距離很遠。

如果您注釋掉 .accordianarea 的 ZC7A62 .accordianarea中的顯示和不透明度行

display: none;
opacity: 0;

默認情況下，您將在打開的 state 中看到手風琴，並且 map 邊界/縮放工作正常。

有什么方法可以“強制”谷歌 map 在手風琴關閉的情況下正確渲染？

Answer 1

新答案：

在深入挖掘之后，我發現MapOptions有一個minZoom選項：

最小縮放（可選）

map 上將顯示的最小縮放級別。 如果省略或設置為 null，則使用當前 map 類型的最小縮放。

如果我們檢查您的map_zoom() function，它會在第一次調用時返回8 。

如果我們將8與minZoom一起使用（而不是常規的zoom ），我們將獲得所需的結果，而無需再次調用map_zoom() ：

var defaultZoom = 8;
var allMarkers = new Array();
var mapOptions = {
    minZoom: defaultZoom,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

更新了 JSFiddle

---

老答案：

1. 將map_zoom() map_init() ，以便我們可以從任何地方調用它
2. 在$('.accordiancontrol').click上，調用map_zoom()來更新我們的縮放：

$('.accordiancontrol').click(function(){
    if ($('#accordianarea' + thisId).is(":visible")) {
        // Close accordianarea
    }
    else {
        // Open accordianarea

        // Update zoom
        map_zoom();
    }
});

更新了 JSFiddle

Answer 2

“我只能想象 DOM 將折疊的父 div 設置為零高度，因此谷歌地圖在堆棧中一直將其視為零，並相應地根據零高度和寬度設置邊界。”

正如您所說，縮放基於零高度和寬度設置邊界。您可以做的是調用map_init(); 在 map 展示。 這樣 div 具有高度和寬度，並且 map 獲得適當的縮放范圍

        $('.accordiancontrol').click(function(){
                        var thisId = $(this).attr('id').replace(/^\D+/g,"")
                        if ($('#accordianarea' + thisId).is(":visible"))
                        {
                           // Close accordianarea
                        }
                        else
                        {
                         map_init();
                        // Open accordianarea
                        }
                    });