Leaflet.js地图无法显示问题排查与解决求助

这是我首次使用JavaScript开发Leaflet地图，已严格遵循官方文档操作步骤，但地图内容始终无法显示，当前效果如图所示。我搜索相关问题后尝试多种代码方案均未解决，我的代码如下：

<!DOCTYPE html>
<html>
<head>
<title>Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>
<body>
<div id="map" style="width: 100%; height: 600px"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
var map = L.map('map').setView([38.738853, 0.039328], 13);
bounds = new L.LatLngBounds(new L.LatLng(38.589932205137842, -0.24943472068649825), new L.LatLng(38.834130125688162, 0.250210265053367));
L.tileLayer('http://tiles.primarysolutions.org/tiles/{z}/{x}/{y}.png', {
minZoom: 12,
maxZoom: 15,

attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
}).addTo(map);
</script>
</body>
</html>

• 瓦片服务失效：你使用的http://tiles.primarysolutions.org/tiles/{z}/{x}/{y}.png域名已无法访问，地图无法获取瓦片资源，这是地图不显示的核心原因。
• 混合内容拦截：当前多数浏览器会阻止HTTPS页面加载HTTP资源，即便用HTTP打开页面，该瓦片服务本身也已停止服务。
• Leaflet版本过旧：0.7.3是非常老旧的版本，存在兼容性问题，且官方已停止维护。
• 变量不规范：bounds未加声明，属于全局变量污染，但这不会直接导致地图不显示。

以下是修改后的可运行代码：

<!DOCTYPE html>
<html>
<head>
<title>Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 使用HTTPS加载最新稳定版Leaflet样式 -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
</head>
<body>
<div id="map" style="width: 100%; height: 600px"></div>
<!-- 使用HTTPS加载最新稳定版Leaflet脚本 -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
// 规范变量声明
const map = L.map('map').setView([38.738853, 0.039328], 13);
const bounds = new L.LatLngBounds(
  new L.LatLng(38.589932205137842, -0.24943472068649825),
  new L.LatLng(38.834130125688162, 0.250210265053367)
);
// 替换为稳定的OpenStreetMap瓦片服务
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  minZoom: 12,
  maxZoom: 15,
  attribution: 'Map data &copy; OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox'
}).addTo(map);
// 可选：给地图添加边界限制
map.setMaxBounds(bounds);
</script>
</body>
</html>

修改细节说明：

1. 替换瓦片服务：改用OpenStreetMap官方的瓦片服务，确保资源能正常加载。
2. 升级Leaflet版本：切换到1.9.4稳定版，使用HTTPS链接避免浏览器拦截，同时解决旧版本的兼容性问题。
3. 规范变量：用const声明变量，避免全局变量污染。
4. 可选优化：添加map.setMaxBounds(bounds)，让地图被限制在你设定的范围内。

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