Question

我通过带有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>

JS

// 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);

错误是：

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

Answer 1

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

由于您是有期限的学生，所以我为您提供快速解决方案。将此行添加到setupApp的顶部：

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

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

小册子：地图容器已经初始化

1 个答案: