前言
足迹地图我很早就知道咯，一直没有办法实现它，大发的地图插件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更完美，体验感更足。
回复 段先森 取消回复