Я разработал код через программу Atom с плагином предварительного просмотра HTML, и он выглядит правильно. Однако его открытие в 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 © <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 © 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);
Ошибка:
Появляющаяся ошибка: Uncaught Error: контейнер карты уже инициализирован. в 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', {