前言
足迹地图我很早就知道咯，一直没有办法实现它，大发的地图插件Marker Pro很喜欢，但只是看看而已。直到发现了它——Leaflet，一个开源JavaScript库，适用于适合移动设备的交互式地图。
只不过我的博客在国内，想着多一事不如少一事，图源换成国内的应该好点儿（我换成高德了），原理它差不多。就像博友说的，使用国外图源，一不小心，把一小块地画给国外，就是勾结外部势力了。话不多说，上教程。
步骤
我的想法是新建页面模版，独立页面显示。
1、准备工作
新建footprint.js文件，footprint.js文件应包含你的足迹点数据，上传这个文件到你主题目录的js文件里，比如：
/wp-content/themes/your-theme/js/footprint.js
footprint.js文件的内容
const footprint = [ ["<b>银川</b><i>Yinchuan</i><a href='https://www.duanxiansen.com/84.html/'>银川镇北堡西部影视城三日游</a>", 38.46667, 106.26667], ["<b>榆中</b><i>Yuzhong</i><a href='https://www.duanxiansen.com/1303.html/'>记第一次滑雪</a>", 36.0620781, 103.8318566], ["<b>白银</b><i>Baiyin</i><a href='https://www.duanxiansen.com/1115.html/'>游黄河石林景区(公司第一次团建)</a>", 36.5340173, 104.1467575], // 添加更多点 ];
2、创建自定义页面模版文件
新建page-map.php文件，放在你的主题页面模版文件夹里。
<?php
/*
Template Name: 足迹地图
*/
get_header(); ?>
<style>
#map {
width: 100%;
max-width: 1200px;
height: 500px;
margin: 0 auto;
}
</style>
<div id="map" class="other-map"></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德地图API密钥"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/footprint.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var map = new AMap.Map('map', {
center: [116.397128, 39.916527],
zoom: 4
});
if (typeof footprint !== 'undefined' && footprint.length > 0) {
for (let i = 0; i < footprint.length; i++) {
const [popupText, lat, lng] = footprint[i];
var marker = new AMap.Marker({
position: new AMap.LngLat(lng, lat),
map: map
});
marker.on('click', function() {
var infoWindow = new AMap.InfoWindow({
content: popupText,
offset: new AMap.Pixel(0, -30)
});
infoWindow.open(map, marker.getPosition());
});
}
} else {
console.error('footprint array is undefined or empty');
}
});
</script>
<?php get_footer(); ?>
自行申请高德地图API密钥。注意上述代码中js的路径
/js/footprint.js"
结尾
过程很复杂，我简化了步骤，直接操作会很简单，不过相比较使用Leaflet，任有许多不完美之处，比如点击标记点显示文章图片，Leaflet会自动生成缩略图，而这个显示原图，所以我去掉了图片显示。鼠标滑过标记点，Leaflet会自动显示标记点文章，而这个需要点击标记点，而且点开之后需要手动关闭才能浏览下个标记点。Leaflet则不需要，随便点击空白处就关闭了。相比较，Leaflet更完美，体验感更足。
23
专门跑来看了一下。真的去掉了啊。本想看看的。哈哈哈
嗐。不过你结尾说的问题，高德可以解决。鼠标经过显示；或者点击空白关闭。监听一下事件就可以了
@目的地-Destination这个我也弄了，哈哈还是有点儿小瑕疵
@段先森那帮我看看，还有啥毛病，我再优化优化。哈哈哈。
另外，我发现你的邮件通知，最后一段是“您可以点击 查看回复的完整內容”，我发现，这个链接是打不开的。
@目的地-Destination哈哈，确实，这是主题的缘故，我反馈给作者咯
还没上线吗？想着有没有什么可以抄袭一下，哈哈。
@冰剑看到了看到了，在关于里面。
等找时间抄作业
@obaby哈哈，谬赞 😛
插个眼，我也想弄很久了
@缙哥哥那就赶快行动起来吧
我看Leaflet加载是世界地图！其实也最好加载世界地图，避免一些问题
@网友小宋确实如此，心理作用也影响人
可以的，经常出去玩的，可以试试点亮中国地图。
@皇家元林确实哈，地图本身就有点亮
折腾无极限，加油！
我之前也是用GD地图，后面它不停变换使用规则，直接改用BD地图。。。
@Lvtu感觉样式不太好看，哈哈
@段先森BD地图确实丑，刚开始选择GD就是因为那个暗黑样式我非常喜欢，结果后面改规则需要付费才可以用，再后面又改要3个月上去更新一次数据，不然直接就给你删除。。。
@Lvtu哈哈，确实呀，主要是追踪就很烦
@段先森你那个试一下a标签前加个换下行会不会好看点, 或者试一下p标签和空格。。。
@段先森a标签前加个br，加了尖括号竟然直接被删除了。。。
@Lvtu假期折腾，我昨天试了下，不太理想，你的足迹比我的精致
挺能折腾呀！！强！
@往东行嘿嘿，这不，时间就这样过去了