Leaflet地图及控制器无法显示，求助正确调用方法

针对你提供的代码，地图及控制器无法显示主要有以下几个常见问题及对应解决办法：

1. 地图容器高度不生效 #

你给#map设置了height:100%，但如果它的父元素（html、body）没有设置高度，百分比高度会失效，容器实际高度为0，导致地图无法渲染。

解决办法：给html和body添加样式：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

2. 瓦片图层路径或可用性问题 #

你使用的是本地瓦片maps/map_smartue/{z}/{x}/{y}.png，需要确认：

• 该路径下确实存在对应层级（z）、坐标（x、y）的瓦片图片
• 瓦片的坐标系、层级范围和Leaflet兼容

如果暂时不确定本地瓦片是否正常，可以先替换为公开的测试瓦片来验证地图基础功能：

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

3. Leaflet资源加载异常 #

检查leaflet.css和leaflet.js的路径是否正确，打开浏览器开发者工具（F12）的「网络」标签，查看这两个文件是否返回200状态码，若出现404则说明路径错误，需要调整为正确的文件位置。

修正后的完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Leaflet Map</title>
  <link rel="stylesheet" href="scripts/leaflet/leaflet.css" />
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #map {
      width: 100%;
      height: 100%;
      background-color: #888888;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <script src="scripts/leaflet/leaflet.js"></script>
  <script>
    // 初始化地图
    var map = L.map('map', {
      center: [51.505, -0.09],
      zoom: 13
    });

    // 使用公开瓦片测试（替换为你自己的瓦片路径测试正常后再改回）
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Mark Mark