refresh leaflet map: map container is already initialized(刷新传单地图:地图容器已经初始化)
问题描述
我有一个页面,用户可以在其中选择他可以切换我显示的传单地图.
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 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>";
在渲染地图的地方重新加载 div 的内容.
to reload content of div where render map.
这篇关于刷新传单地图:地图容器已经初始化的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:刷新传单地图:地图容器已经初始化
基础教程推荐
- Chart.js 在线性图表上拖动点 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 直接将值设置为滑块 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01