第二張小冊子地圖顯示不正確

我有2個選項卡，每個選項卡都有一個小冊子地圖。第一張地圖正確渲染，但第二張地圖僅顯示1個貼圖（其餘灰色），而地圖未在正確的區域中居中。我究竟做錯了什麼？謝謝。第二張小冊子地圖顯示不正確

var map = L.map('tab-1').setView([latitude, longitude], 5); 

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { 
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', 
    maxZoom: 18, 
    id: '', 
    accessToken: '' 
    }).addTo(map); 

    var map2 = L.map('tab-2').setView([latitude, longitude], 5); 

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { 
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', 
    maxZoom: 18, 
    id: '', 
    accessToken: '' 
    }).addTo(map2);

來源

2015-11-16 James Corey

不知道有足夠的信息來幫助你......你就可以重現您的問題在線？（例如[jsfiddle]（http://jsfiddle.net/ve2huzxw/18/）） – ghybs

編輯：

如果未顯示包含您的第二個地圖股利（我想這是一個「標籤」與displayed: none; CSS /樣式內），單張不能夠正確的決定地圖容器大小。

然後，一旦你的第二個地圖則透露，其容器大小的變化，但傳單沒有意識到，仍然使用以前的大小。

你可以簡單地調用map2.invalidateSize()一旦地圖被發現，使單張現在涵蓋與瓷磚的新領域。

您還需要重新設置視圖（使用setView或fitBounds或任何您喜歡的方法），因爲它之前使用的是不正確的容器邊界。

演示：http://jsfiddle.net/ve2huzxw/52/

（取消註釋第21行，然後重新運行，以獲得正確的行爲）

原來的答覆：

歡迎SO！

你真的使用兩次L.map(location)，與同location？

這在我看來，傳單會嘗試在同一容器中創建2張地圖。我想它會產生意想不到的結果......

這可能是筆誤，是不是？

來源

2015-11-16 16:43:38 ghybs

謝謝。不，地點不一樣。這是一個錯字。我將編輯帖子。 –

如果你還沒有找到，我想你只需要在你顯示第二個選項卡時調用'map2.invalidateSize（）'。 – ghybs

第二張小冊子地圖顯示不正確

回答

相關問題