如何用Leaflet创建旅行足迹地图：从快速部署到博客嵌入教程

前言

作为一个喜欢旅行爱拍照的博主来说，一直想要直观的展示自己所见所闻，所以我弄了一个摄影展示站。之后看到过S和小宋有弄过足迹地图，正好满足我的要求——关联博文和地址，很直观的能把走过的地方展现在眼前。市面上地图的软件很多，比如上面两位用的mapsmarker和leaflet，其他的像jVectorMap或者你可以直接用百度，高德和google现成的。

综合考虑之后，我选择了leaflet，因为开源，加上访问速度也不错。那么，就来看看怎么部署和引用到自己的播客吧。这里也参考了码农明明桑的源码。

leaflet的快速部署

首先网页head引用CSS和JS文件，这里用官网推荐的cdn提供商，你也可以直接下载他们的源码部署在服务器上，我后面也是这么做的，这里先做个演示。

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
     integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
     crossorigin=""/>
 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
     integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
     crossorigin=""></script>

接着，就可以在body部分放入你需要位置放入地图元素

<div id="map"></div>

同时可以需要定义地图容器的固定尺寸

#mapid { height: 180px; }

这里方便演示，就放一块儿，直接指定了

<div id="map" style="height: 500px; width: 500px"></div>

这里就已经做好初始化地图的准备了，接下去我们设置地图

var map = L.map('map', {gestureHandling: true, minZoom: 1, maxZoom: 10}).setView([33.3007613,117.2345622], 1); 
// 设置地图，并绑定到id为'map'的元素上，同时开启手势，设置放大和缩小的极限值，设置中心经纬度坐标，初始视角放大等级为1（全球地图）

这时候你访问这个文件，只能看到有个地图的框，是没有内容的，那么，我们需要给地图加上瓦片图层~~细想这个翻译还蛮贴切的~~，教程里我们也使用官方给数据，提一嘴，leaflet对于使用他们的开源服务是有明确版权要求的，详见瓦片使用政策。

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {    // 官方瓦片服务，{z}{x}{y}分别表示缩放等级，瓦片列，瓦片行
    maxZoom: 10,    // 最大缩放等级
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'    // 版权声明
}).addTo(map);

现在我们就可以看到地图正常显示了，那么，怎么增加标记点呢？leaflet提供了不同的标记方法，这里我们使用圆形mark

marker = new L.circleMarker([40.190632,116.412144], {    // 标记坐标    
    radius: 10,            // 标记半径
    color: '#305370',    // 标记颜色
    fillOpacity: 0.35,    // 标记透明度
    stroke: false,        // 是否增加标记边框
}).bindPopup("<b>北京</b><i>Beijing</i>").addTo(map);        // 弹出框内容

嵌入博客

我是用的博客是typecho系统+VOID主题，要引入到博客，可以使用博客系统自带的模板，所以我参考归档页面编写了旅行这个页面。内容基本上和上面写的差不多，主要有以下几点：

下载官网的源码替换cdn提供的js和css文件
选用carto提供瓦片服务
额外引用一个js文件来编写坐标，这样就不需要去改这个页面源码，每次在js中增加坐标文件就可以达到添加标记点的目的了
引入分类为“旅行”的文章，自动转换成卡片展示

我简单说下上面这几点吧：

官网地址:下载，下载完后放到你的服务器中，然后在头文件引入

<!--地图资源-->
<link rel="stylesheet" href="你的服务器地址/leaflet/leaflet.css" />
<!--地图资源-->
<script src="你的服务器地址/leaflet/leaflet.js"></script>

第二点，改用carto瓦片服务

var cartodbAttribution = '&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attribution" target="_blank">CARTO</a>';
var map = L.map('map', {gestureHandling: true, minZoom: 1, maxZoom: 10}).setView([33.3007613,117.2345622], 2);
map.zoomControl.setPosition('topright');
map.createPane('labels');
map.getPane('labels').style.zIndex = 650;
map.getPane('labels').style.pointerEvents = 'none';
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
attribution: cartodbAttribution
}).addTo(map);

额外的js文件

let points = [
    ["<b>广州</b><i>Guangzhou</i><p></p>", 23.1220615,113.3714803],
    ["<b>深圳</b><i>Shenzhen</i><p></p>", 22.5445741,114.0545429],
    ["<b>上海</b><i>Shanghai</i><p></p>", 31.2356383,121.4693327],
    ["<b>南京</b><i>Nanjing</i><p></p>", 32.0743982,118.7955266],
    ["<b>杭州</b><i>Hangzhou</i>", 30.2450166,120.0915979],
    ["<b>大阪</b><i>Osaka</i><p></p><p>17年旅行</p>", 34.6545464,135.4289211],
    ["<b>京都</b><i>Kyoto</i><p></p><p>17年旅行</p>", 34.9675192,135.7797101],
    ["<b>奈良</b><i>Nara-ken</i><p></p><p>17年旅行</p>", 34.6838455,135.8483084],
    ["<b>罗马</b><i>Rome</i><p></p><p>19年旅行</p>", 41.902782,12.496366],
    ["<b>锡耶纳</b><i>Siena</i><p></p><p>19年旅行</p>", 43.318749,11.330757],
    ["<b>佛罗伦萨</b><i>Florence</i><p></p><p>19年旅行</p>", 43.769562,11.255814],
    ["<b>米兰</b><i>Milan</i><p></p><p>19年旅行</p>", 45.464211,9.191383],
    ["<b>小樽</b><i>Otaru</i><p></p><a href='/archives/hokkido-9day-travel.html'><img src='https://pic.pinaland.cn/uploads/2024/02/02/65bc84ff51fe7.jpg' alt='小樽'/>北海道9日纯自由行攻略</a>", 43.190701,140.994692],
    ["<b>札幌</b><i>Sapporo</i><p></p><a href='/archives/hokkido-9day-travel.html'><img src='https://pic.pinaland.cn/uploads/2024/03/04/65e5d12a71eac.jpg' alt='初音'/>北海道9日纯自由行攻略</a>", 43.062096,141.354376],
    ["<b>留寿都</b><i>Rusutsu</i><p></p><a href='/archives/hokkido-9day-travel.html'><img src='https://pic.pinaland.cn/uploads/2024/02/02/65bc8030d5e2b.jpg' alt='滑雪'/>北海道9日纯自由行攻略</a>", 42.743908,140.895331],
    ["<b>登别</b><i>Noboribetsu</i><p></p><a href='/archives/hokkido-9day-travel.html'><img src='https://pic.pinaland.cn/uploads/2024/02/02/65bc8610a7e5c.jpg' alt='地狱谷'/>北海道9日纯自由行攻略</a>", 42.412772,141.106419],
    ["<b>大阪</b><i>Osaka</i><p></p><a href='/archives/osaka-3day-tarvel.html'><img src='https://pic.pinaland.cn/uploads/2024/09/24/66f296d12e72a.webp' alt='环球影城'/>大阪三日游：环球影城、超级任天堂世界攻略 | 秋季大阪旅行心得 </a>", 34.665442,135.432338],
    ["<b>喀什</b><i>Kashgar</i><p></p><a href='/archives/nanjiang.html'><img src='https://pic.pinaland.cn/uploads/2024/05/07/663a3f6db330c.webp' alt='昆仑塔'/>去看一片亿年前的海洋——南疆之旅</a>", 38.29,75.12],
    ["<b>塔县</b><i>Tashkurgan</i><p></p><a href='/archives/nanjiang.html'><img src='https://pic.pinaland.cn/uploads/2024/05/07/663a3e09bc49f.webp' alt='南疆'/>去看一片亿年前的海洋——南疆之旅</a>", 37.77,75.23],
];

然后同样头文件引入

<script type="text/javascript" src="<?php $this->options->themeUrl('static/footPrints.js'); ?>"></script>

同时标记点函数稍微变一下

for (let i = 0; i < points.length; i++) {
const [popupText, lat, lng] = points[i];
marker = new L.circleMarker([lat, lng], {
    radius: 10,
    color: '#305370',
    fillOpacity: 0.35,
    stroke: false,
}).bindPopup(popupText).addTo(map);