2013-10-04 117 views
30

我有一個頁面給出了一個選擇給用戶,他可以切換我顯示的小冊子地圖。刷新小冊子地圖:地圖容器已經初始化

在初始傳單地圖加載後,我的問題是當我想刷新地圖。

我總是「地圖容器已初始化」:

問題行是:

var map = L.map('mapa').setView([lat, lon], 15); 

最初它加載很好,但是當我選擇的形式,其他參數和要顯示的再次映射崩潰。

順便說一句,我試圖摧毀並重新創建$('#mapa')與jQuery第二setView()之前,但它顯示相同的錯誤。

+0

您能否接受第一個答案。它已經過測試和工作。 – JohnDoe

回答

11

HTML:

<div id="weathermap"></div> 

的JavaScript:

function buildMap(lat,lon) { 
    document.getElementById('weathermap').innerHTML = "<div id='map' style='width: 100%; height: 100%;'></div>"; 
    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
        osmAttribution = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,' + 
         ' <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>', 
    osmLayer = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution}); 
    var map = new L.Map('map'); 
    map.setView(new L.LatLng(lat,lon), 9); 
    map.addLayer(osmLayer); 
    var validatorsLayer = new OsmJs.Weather.LeafletLayer({lang: 'en'}); 
    map.addLayer(validatorsLayer); 
} 

我用這個:

document.getElementById('weathermap').innerHTML = "<div id='map' style='width: 100%; height: 100%;'></div>"; 

重裝格在那裏渲染圖的內容。

+0

拯救生命!謝謝@Artem_Kovalyov – Uraforclain

63

嘗試map.remove();嘗試重新加載地圖之前。這將使用Leaflet的庫(而不是jquery的)來移除以前的地圖元素。

+2

萬分感謝,我的投票!這是一個簡單而無痛的修復。 – JohnDoe

+16

if(map!= undefined){map.remove(); }如果你不確定地圖是否存在.. –

4

好,經過多次尋找,我意識到這是一個在http://leafletjs.com/examples/layers-control.html

有據可查我已經結束不會重新繪製地圖,但是一旦打印和重繪點上的每個新的Ajax調用,所以問題是如何清洗提出舊點並只打印新的點。我已經結束這樣做:

var point = L.marker([new_marker[0], new_marker[1]]).addTo(map).bindPopup('blah blah'); 
points.push(point); 
//points is a temporary array where i store the points for removing them afterwards 

因此,在每個新的Ajax調用,畫的新點前,我這樣做:

for (i=0;i<points.length;i++) { 
    map.removeLayer(points[i]); 
} 
points=[]; 

到目前爲止,一切都很好:-)

1

我有同樣的problem.then我設置全局變量映射如VAR地圖=空,然後顯示地圖我檢查

if(map==null)then map=new L.Map('idopenstreet').setView(); 

通過這個解決方案你的地圖將是唯一的初始化後第一時間即地圖會用L.Map填充,那麼它不會爲空。所以沒有錯誤會像地圖容器已經初始化那樣。

11

您應該添加地圖的最佳方式

map.off(); 
map.remove(); 

。關閉(),它也可以更快,不會導致

+0

這應該是答案,就像一個魅力。 – wodzu

+0

對不起,你如何使用它? – djack109

3

當你只是刪除一張地圖,它破壞了的div id引用事件的問題,因此,刪除(後),您需要重新建立股利,其中地圖將被顯示,以避免「未捕獲的錯誤:未找到地圖容器」。

if(map != undefined || map != null){ 
    map.remove(); 
    $("#map").html(""); 
    $("#preMap").empty(); 
    $("<div id=\"map\" style=\"height: 500px;\"></div>").appendTo("#preMap"); 
} 
0

使用redrawAll()函數而不是renderAll()。