为什么传单演示不在 jsfiddle 上工作？答案

【问题标题】：why isn't leaflet demo working on jsfiddle?为什么传单演示不在 jsfiddle 上工作？
【发布时间】：2021-03-05 21:34:37
【问题描述】：

https://terrafrost.com/leaflet/demo01.html 在自己运行时按预期工作，但是当在 https://jsfiddle.net/x2f05eov/ 的 jsfiddle 上运行时，我得到的只是一个空白页。我在控制台中没有看到任何错误。

有什么想法吗？

JS代码如下：

function layerParams(id)
{
    return {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: id,
        tileSize: 512,
        zoomOffset: -1
    };
}

var mapboxUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

var light = L.tileLayer(mapboxUrl, layerParams('mapbox/light-v10'));
var streets = L.tileLayer(mapboxUrl, layerParams('mapbox/streets-v11'));
var satellite = L.tileLayer(mapboxUrl, layerParams('mapbox/satellite-streets-v11'));

var mymap = L.map('mapid', {
    center: [30.267222, -97.743056],
    zoom: 13,
    layers: [light]
});

var baseMaps = {
    "Light": light,
    "Streets" :streets,
    "Satellite": satellite
};

lightLines = L.layerGroup();
streetsLines = L.layerGroup();
satelliteLines = L.layerGroup();

var params = {
    color: 'blue',
    opacity: 0.75,
    smoothFactor: 1
};

var latlngs = [[30.267222, -97.743056],[31.267222, -96.743056]];

tempParams = Object.assign(params, {weight: 10});
satelliteLines.addLayer(L.polyline(latlngs, tempParams));
tempParams = Object.assign(params, {weight: 3});
lightLines.addLayer(L.polyline(latlngs, tempParams));
tempParams = Object.assign(params, {weight: 5});
streetsLines.addLayer(L.polyline(latlngs, tempParams));

var hasOverlay = false;

mymap.on('baselayerchange', function(e) {
    switch (e.name) {
        case 'Light':
            if (hasOverlay) {
                lightLines.addTo(mymap);
                streetsLines.removeFrom(mymap);
                satelliteLines.removeFrom(mymap);
            }
            break;
        case 'Streets':
            if (hasOverlay) {
                lightLines.removeFrom(mymap);
                streetsLines.addTo(mymap);
                satelliteLines.removeFrom(mymap);
            }
            break;
        case 'Satellite':
            if (hasOverlay) {
                lightLines.removeFrom(mymap);
                streetsLines.removeFrom(mymap);
                satelliteLines.addTo(mymap);
            }
    }
});

mymap.on('overlayadd', function(e) {
    console.log('overlayadd called');
    hasOverlay = true;
});

mymap.on('overlayremove', function(e) {
    console.log('overlayremove called');
    lightLines.removeFrom(mymap);
    streetsLines.removeFrom(mymap);
    satelliteLines.removeFrom(mymap);
});

var overlays = {
    'Demo': lightLines
};

L.control.layers(baseMaps, overlays).addTo(mymap);

HTML代码如下：

<body style="margin: 0; padding: 0; height: 100%">
<div id="mapid" style="width: 100%; height: 100%"></div>

传单 CSS 和 JS 也包含在内。

【问题讨论】：

标签： leaflet jsfiddle

【解决方案1】：

您只是错过了结束 body 和 html 标记

<!DOCTYPE html>
<html style="height: 100%">

<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
</head>

<body style="margin: 0; padding: 0; height: 100%">
  <div id="mapid" style="width: 100%; height: 100%"></div>
  <script>
    function layerParams(id) {
      return {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
          '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
          'Imagery Â© <a href="https://www.mapbox.com/">Mapbox</a>',
        id: id,
        tileSize: 512,
        zoomOffset: -1
      };
    }

    var mapboxUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

    var light = L.tileLayer(mapboxUrl, layerParams('mapbox/light-v10'));
    var streets = L.tileLayer(mapboxUrl, layerParams('mapbox/streets-v11'));
    var satellite = L.tileLayer(mapboxUrl, layerParams('mapbox/satellite-streets-v11'));

    var mymap = L.map('mapid', {
      center: [30.267222, -97.743056],
      zoom: 13,
      layers: [light]
    });

    var baseMaps = {
      "Light": light,
      "Streets": streets,
      "Satellite": satellite
    };

    lightLines = L.layerGroup();
    streetsLines = L.layerGroup();
    satelliteLines = L.layerGroup();

    var params = {
      color: 'blue',
      opacity: 0.75,
      smoothFactor: 1
    };

    var latlngs = [
      [30.267222, -97.743056],
      [31.267222, -96.743056]
    ];

    tempParams = Object.assign(params, {
      weight: 10
    });
    satelliteLines.addLayer(L.polyline(latlngs, tempParams));
    tempParams = Object.assign(params, {
      weight: 3
    });
    lightLines.addLayer(L.polyline(latlngs, tempParams));
    tempParams = Object.assign(params, {
      weight: 5
    });
    streetsLines.addLayer(L.polyline(latlngs, tempParams));

    var hasOverlay = false;

    mymap.on('baselayerchange', function(e) {
      switch (e.name) {
        case 'Light':
          if (hasOverlay) {
            lightLines.addTo(mymap);
            streetsLines.removeFrom(mymap);
            satelliteLines.removeFrom(mymap);
          }
          break;
        case 'Streets':
          if (hasOverlay) {
            lightLines.removeFrom(mymap);
            streetsLines.addTo(mymap);
            satelliteLines.removeFrom(mymap);
          }
          break;
        case 'Satellite':
          if (hasOverlay) {
            lightLines.removeFrom(mymap);
            streetsLines.removeFrom(mymap);
            satelliteLines.addTo(mymap);
          }
      }
    });

    mymap.on('overlayadd', function(e) {
      console.log('overlayadd called');
      hasOverlay = true;
    });

    mymap.on('overlayremove', function(e) {
      console.log('overlayremove called');
      lightLines.removeFrom(mymap);
      streetsLines.removeFrom(mymap);
      satelliteLines.removeFrom(mymap);
    });

    var overlays = {
      'Demo': lightLines
    };

    L.control.layers(baseMaps, overlays).addTo(mymap);
  </script>

</body>

</html>

编辑：您需要定义显式高度（f.i 100vh），因为设置 100% 高度意味着在这种情况下不存在的父 div 的高度 fiddle

【讨论】：

这对 jsfiddle 没有影响：jsfiddle.net/we40d675