传单：地图容器已经初始化答案

【问题标题】：Leaflet: Map container is already initialized传单：地图容器已经初始化
【发布时间】：2018-07-04 11:06:36
【问题描述】：

我通过带有 HTML 预览插件的 Atom 程序开发了代码，它看起来正确。但是，在 Chrome 中打开它不起作用。

我已经搜索过这个页面，在重新加载地图时调用<div id = 'map'>似乎有问题。我已经尝试了建议的解决方案，但没有一个对我有用。

这是一篇学术作品。我把代码留在下面。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>

    </head>
  <body>
    <div id="wrapper">
      <div class="piechart-control">
        <div class="piechart-container">    
        </div>
      </div>
      <div id="map"></div>
   </div>
   <script type="text/javascript" src="./visor_principal.js"></script>
 </body>
</html>

// Funciones de inicializacion del mapa
function setupMapboxLayer() {
  var mapboxUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
  var mapbox = L.tileLayer(mapboxUrl, {
    id: 'mapbox.streets',
    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>',
    ].join(', '),
  });
  return mapbox;
}
  // Minimap
function setupOsmMinimapLayer() {
  var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
  var osmAttrib='Map data &copy; OpenStreetMap contributors.';
  var osm2 = new L.TileLayer(osmUrl, {minZoom: 0, maxZoom: 13, attribution: osmAttrib });
  var miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true, position: 'bottomright' });
  return miniMap;
}

// Función de puesta a punto
function setupApp() {
  // Visualizacion del mapa
  var map = L.map('map', {
    zoomControl: false,
    maxZoom: 18,
    minZoom: 9,
    maxBounds: [
      [42.5, -5.011481], // SO
      [43.719965, -2.686499], // NE
    ],
  });

  // Visualización mapa base
  var mapboxLayer = setupMapboxLayer();
  // Visualización Minimap
  var osmMiniMap = setupOsmMinimapLayer();
  //Visualización control de capas
  var controlLayer = setupControlLayer(mapboxLayer);

  window.pieChart = pieChart;
  map.setView([43.087532, -4.082921], 9.5);
  mapboxLayer.addTo(map);
  osmMiniMap.addTo(map);
  controlLayer.addTo(map);
  setupEventListeners(map, pieChart);
  map.addControl(new L.Control.Fullscreen());
}

// Iniciar
window.addEventListener('load', setupApp);

错误是：

出现的错误是：未捕获错误：地图容器已初始化。在 e._initContainer (leaflet.js:5) 在 e.initialize (leaflet.js:5) 在新 e (leaflet.js:5) 在 Object.t.map (leaflet.js:5) 在 setupApp (visor_principal. js:265) 第 265 行对应 var map = L.map('map', {

【问题讨论】：

嗨，Elena，你的问题对我来说并不容易回答，因为它包含很多与问题无关的内容。要追查问题，请尝试剥离尽可能多的与问题无关的代码。以我的经验，这通常有助于找到问题，如果你找不到问题，它会提出一个更简洁的问题，更容易回答。
请看minimal reproducible example
嗨Jieter，我已经总结了我认为问题所在的代码。感谢您的建议。我希望我们能找到解决办法。
您能否也添加您遇到的错误？
出现的错误是：未捕获错误：地图容器已经初始化。在 e._initContainer (leaflet.js:5) 在 e.initialize (leaflet.js:5) 在新 e (leaflet.js:5) 在 Object.t.map (leaflet.js:5) 在 setupApp (visor_principal. js:265) 第 265 行对应 var map = L.map('map', {

标签： javascript html dictionary leaflet

【解决方案1】：

尝试将console.log 添加到setupApp 的顶部。我最好的猜测是它被多次调用。因此，Leaflet 试图在已经存在地图的容器内初始化地图。我建议检查应用程序并尝试了解它发生的原因以及错误逻辑在哪里。

由于您是有截止日期的学生，我有一个快速的解决方案给您。在setupApp的顶部添加这一行：

if (document.querySelector('#map').children.length > 0) return;

如果您的地图已经初始化，setupApp 将不会继续进行。

【讨论】：

我已经完成了，它消除了错误，但是当我用 chrome 打开它时，还没有显示任何内容。所以现在没有错误但什么都没有。
嗯，尝试在 Codepen 中重现您的设置。它可以是任何东西。 @ElenaFerreras
我的猜测是你的 #map 容器有 0 个 width 或 height。尝试在浏览器开发工具中找到它。
#map 容器是#map { width: 100%;高度：100%； }
感谢您的帮助，我正在努力。