問題描述

我有一個頁面，用戶可以在其中選擇他可以切換我顯示的傳單地圖.

I have a page where given a select to the user he can switch the leaflet map I show.

在初始傳單地圖加載后，我的問題是何時我想刷新地圖.

After a initial leaflet map load, my problem is when i want to refresh the map.

我總是得到地圖容器已經初始化":

I always get "Map container is already initialized":

問題行是:

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

最初它加載得很好，但是當我在表單中選擇另一個參數并想再次顯示地圖時它崩潰了.

Initially it loads well, but when I select another parameter in the form and want to display the map another time it crashes.

順便說一句，我嘗試在第二個 setView() 之前使用 jQuery 銷毀和重新創建 $('#mapa') 但它顯示相同的錯誤.

btw, I've tried to destroy and recreate $('#mapa') with jQuery before the second setView() but it shows the same error.

推薦答案

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 >OpenStreetMap</a> contributors,' +
                        ' <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>";

在渲染地圖的地方重新加載 div 的內容.

to reload content of div where render map.

這篇關于刷新傳單地圖:地圖容器已經初始化的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！