首先说一下leaflet是什么，它是一个地图js库，网址是Leaflet - a JavaScript library for interactive maps ,相关的使用方法可以自己去看一下，像我这种英文不好的，直接就用edge打开翻译去查看了。
首先当然是下载了，点击download，这英文单词还是认识的哈，下载最新的1.94稳定版本即可。有的开发者都是用于项目，我这因为比较简单，直接纯粹的js项目处理，顶多使用php做下后端处理，返回json就OK了，所以没有那么复杂，咱们下面接着看怎么使用。
我建立了个目录，解压缩到这个目录下的leaflet目录，然后在根目录新建一个index.html文件，来开始码代码。
起手式来上html:5 回车；
然后引入leaflet的相关”元素“。
<!-- 引入 Leaflet 的 CSS 和 JS 文件 -->
<link rel="stylesheet" href="./leaflet/leaflet.css" />
<script src="./leaflet/leaflet.js"></script>
<script src="./leaflet/jquery-3.6.0.min.js"></script>这里我引入了jquery，不用问为什么，等你用到你就知道了。引入完成了要怎么能够出现地图呢？？？
忘了说明了，我做的是一个离线的地图应用，不是手机端的，纯PC使用，那么就免不了需要用到离线的地图瓦片，那么怎么处理好地图瓦片的下载问题呢？
上工具，还是开源的。
地图下载器，下载地图好帮手！
下载地址：地图下载器: 使用Java开发的地图瓦片图下载工具，支持OpenStreetMap、天地图、谷歌地图、高德地图、腾讯地图、必应地图的XYZ瓦片图下载与合并。
自己去下载。
下载完成后的使用就很方便了，以我下载的高德地图标注版本为例。
左边选择地图，右边选择省份，城市。确定后，就给你画出个边界来，这就是你要下载的瓦片了，别妄想下载太大的地图，就是那个瓦片的数量是相当的多啊。尽量根据自己的项目来确定需要的地图的大小。
选择好后，点击下载地图。会弹出地图瓦片层次的选择框。
这里要注意，你也要根据你自己项目的需要下载，没有必要下载太多，我下载测试了，1-17层是有图像的，18-21是没有图像的，所以就没有必要下载，而且我项目对精度没有太高的要求，默认缩放层级我就控制在了11-17层，需要下载多少，全看你项目的需要。
咱们预估一下下载量，0-17的。
37万张啊，才到17级，你看看21级的；
不等了，还没处理完20层的，看到19层就达到了四百多万张，想想这么零碎的文件读取效率会有多高吧。占用空间会有多大就好了，如果你选个全国地图，那数据量是恐怖的，当然了也能用，你耗得起时间就能行了。
下载完之后，我的建议是下载到你的项目目录里，就不用来回迁移文件了。
继续码代码。
首先在body里创建一个div容器，用来显示地图。
<!-- 地图容器 -->
<div id="map"></div>容器也要顶一下大小，给了id是map了，那就style一下map。
<style>
#map {
height: 990px;
}
</style>给个高度就够用。
然后代码继续，算了直接给个完整版代码吧。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8"> <!-- 设置网页字符编码为 UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 优化移动端视口显示 -->
<title>OfflineMap</title> <!-- 网页标题 -->
<!-- 引入 Leaflet 的 CSS 和 JS 文件 -->
<link rel="stylesheet" href="./leaflet/leaflet.css" /> <!-- 引入 Leaflet 样式表 -->
<script src="./leaflet/leaflet.js"></script> <!-- 引入 Leaflet JavaScript 库 -->
<script src="./leaflet/jquery-3.6.0.min.js"></script> <!-- 引入 jQuery JavaScript 库 -->
<style>
html,
body {
/* 设置 HTML 和 Body 元素高度为浏览器窗口高度 */
height: 100%;
/* 清除内外边距，避免内容溢出 */
margin: 0;
}
#map {
/* 设置地图容器高度为 990px */
height: 990px;
}
</style>
</head>
<body>
<!-- 地图容器 -->
<div id="map"></div>
<script>
// 定义离线瓦片图层，使用本地路径加载地图瓦片
const baseLayers = L.tileLayer('./titles/{z}/{x}/{y}/tile.png', {
maxZoom: 17, <!-- 最大缩放级别为 17 -->
attribution: '© <a href="#">测试标注基础地图</a>'
});
// 初始化地图实例，设置中心坐标、缩放范围、初始缩放级别、显示的基础图层及禁用版权信息
const map = L.map('map', {
// 地图中心坐标：经度 35.023726，纬度 118.356464
center: [35.023726, 118.325837],
// < !--最小缩放级别为 11 -- >
minZoom: 11,
// < !--最大缩放级别为 17 -- >
maxZoom: 17,
// < !--初始缩放级别为 12 -- >
zoom: 12,
// < !--显示的基础图层为定义的离线瓦片图层 -->
layers: [baseLayers],
//显示缩放控件
zoomControl: true,
// < !--添加此行以禁用版权信息 -->
attributionControl: false
});
// 创建标注点，设置坐标、弹窗内容，并将其添加到地图上
// < !--创建标注点，坐标为经度 35.103771，纬度 118.356464 -- >
const marker = L.marker([35.103771, 118.356464])
.bindPopup('这里是临沂市人民政府'); // < !--为标注点绑定弹窗，内容为 "这里是临沂市人民政府" -- >
marker.addTo(map); //< !--将标注点添加到地图上 -->
</script>
</body>
</html>都给注释好了，不用多解释了吧。
效果是这样的。
天黑了，该下班回家了，不写了，等后续再整吧。这是个连载哈。
151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
