Leaflet地图API集成问题：地图无法显示求助

问题描述 #

尝试集成Leaflet地图API，但地图无法正常显示。参照MapTiler的Leaflet教程操作，问题截图如下：

现有代码 #

map.component.html #

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
    <style>
      #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
    </style>
  </head>
  <body>
    <div id="map">
      <a href="https://www.maptiler.com" style="position:absolute;left:10px;bottom:10px;z-index:999;"><img src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"></a>
    </div>
    <p><a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a></p>
    <script>
      var map = L.map('map').setView([0, 0], 1);
      L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=cCaw1Q6a8s1Bm4tJPpTq',{
        tileSize: 512,
        zoomOffset: -1,
        minZoom: 1,
        attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e",
        crossOrigin: true
      }).addTo(map);
    </script>
  </body>
</html>

map.component.css #

html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }

解决方法 #

• 清理冲突的布局代码：HTML内联样式已给#map设置全屏绝对定位，外部CSS又给body设置相同规则，导致布局冲突。删除map.component.css中的所有样式，或只保留其中一套布局规则。
• 验证API密钥有效性：确认MapTiler密钥cCaw1Q6a8s1Bm4tJPpTq是否未过期、权限正常，无效密钥会导致瓦片加载失败。
• 查看浏览器控制台报错：按下F12打开开发者工具，切换到控制台标签，检查是否有资源加载失败、JS语法错误等提示（比如瓦片请求403/404、Leaflet资源加载失败），直接定位问题根源。
• 升级Leaflet版本：当前使用的1.7.1版本较旧，尝试升级到1.9.4等稳定新版本，确保与MapTiler服务兼容。

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