Minimal Scene

<!--
  本示例：Leaflet 最小可运行场景（42 KB，零依赖配置）
  核心逻辑：搜索「核心逻辑开始 / 结束」两行注释
  依赖：Leaflet 1.9.4 · jsDelivr CDN + Esri 瓦片
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="robots" content="noindex,follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Leaflet 最小可运行场景</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css">
<style>
  html, body { height: 100%; margin: 0; }
  body {
    font: 13px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    display: flex; flex-direction: column;
    overflow: hidden;
  }

  .hint {
    flex: 0 0 auto;
    padding: 8px 14px;
    background: #f6f7f9;
    border-bottom: 1px solid #e2e5ea;
    font-size: 12px;
    color: #5a6270;
  }
  .hint b { color: #1f5fd0; font-weight: 600; }

  #map { flex: 1 1 auto; min-height: 0; }

  /* 瓦片加载失败时的可见提示，避免只看到一片灰 */
  .tile-warn {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 500;
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    color: #96590a;
    display: none;
    max-width: 240px;
    line-height: 1.5;
  }
  .tile-warn.on { display: block; }
</style>
</head>
<body>

  <div class="hint">
    <b>零 Token</b>
    <span>Leaflet 本身不绑定任何地图服务；这里用 Esri 公共瓦片，无需申请 Key。</span>
  </div>

  <div id="map" style="position:relative">
    <div class="tile-warn" id="tileWarn">
      瓦片加载较慢或被网络阻断，地图底图可能显示不完整。标记点与交互仍然可用。
    </div>
  </div>

<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
(function () {
  'use strict';

  if (typeof L === 'undefined') {
    document.getElementById('map').innerHTML =
      '<div style="padding:20px;color:#b42318">Leaflet 加载失败，请检查能否访问 cdn.jsdelivr.net</div>';
    return;
  }

  // ===== 核心逻辑开始 =====

  /* 1. 初始化地图：中心点 [纬度, 经度]，注意 Leaflet 是 lat, lng 顺序 */
  var map = L.map('map', {
    center: [39.907359, 116.391263],
    zoom: 11,
    zoomControl: true
  });

  /* 2. 添加瓦片图层 —— 这是唯一需要外部服务的地方，换成天地图/高德只需改 url */
  var tiles = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
    maxZoom: 19,
    attribution: 'Tiles © Esri'
  }).addTo(map);

  var tileErrors = 0;
  tiles.on('tileerror', function () {
    tileErrors++;
    if (tileErrors === 3) document.getElementById('tileWarn').classList.add('on');
  });

  /* 3. 添加一个标记与弹窗 */
  L.marker([39.907359, 116.391263])
    .addTo(map)
    .bindPopup('<b>北京</b><br>39.907359, 116.391263')
    .openPopup();

  /* 4. 画一个圆，验证矢量图层可用 */
  L.circle([39.907359, 116.391263], {
    radius: 3000,
    color: '#1f5fd0',
    weight: 1.5,
    fillColor: '#1f5fd0',
    fillOpacity: 0.08
  }).addTo(map);

  // ===== 核心逻辑结束 =====

  window.__map = map;
})();
</script>
</body>
</html>