为什么传单演示不适用于 jsfiddle？

问题描述

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,[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,{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 也包括在内。

解决方法

您只是错过了一个结束 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,[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,{
      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 leaflet

为什么传单演示不适用于 jsfiddle？

问题描述

解决方法

相关问答