前言
足迹地图我很早就知道咯,一直没有办法实现它,大发的地图插件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更完美,体验感更足。
obaby ( VIP 4 )
中国山东等找时间抄作业
段先森
中国甘肃@obaby 哈哈,谬赞
缙哥哥 ( VIP 1 )
中国浙江插个眼,我也想弄很久了
段先森
中国甘肃@缙哥哥 那就赶快行动起来吧
网友小宋 ( VIP 6 )
中国河南我看Leaflet加载是世界地图!其实也最好加载世界地图,避免一些问题
段先森
中国甘肃@网友小宋 确实如此,心理作用也影响人
皇家元林 ( VIP 2 )
中国安徽可以的,经常出去玩的,可以试试点亮中国地图。
段先森
中国甘肃@皇家元林 确实哈,地图本身就有点亮
Lvtu ( VIP 6 )
中国广东折腾无极限,加油!
我之前也是用GD地图,后面它不停变换使用规则,直接改用BD地图。。。
段先森
伊朗@Lvtu 感觉样式不太好看,哈哈
Lvtu ( VIP 6 )
中国广东@段先森 BD地图确实丑,刚开始选择GD就是因为那个暗黑样式我非常喜欢,结果后面改规则需要付费才可以用,再后面又改要3个月上去更新一次数据,不然直接就给你删除。。。
段先森
伊朗@Lvtu 哈哈,确实呀,主要是追踪就很烦
Lvtu ( VIP 6 )
中国广东@段先森 你那个试一下a标签前加个换下行会不会好看点, 或者试一下p标签和空格。。。
Lvtu ( VIP 6 )
中国广东@段先森 a标签前加个br,加了尖括号竟然直接被删除了。。。
段先森
中国甘肃@Lvtu 假期折腾,我昨天试了下,不太理想,你的足迹比我的精致
往东行 ( VIP 1 )
中国北京挺能折腾呀!!强!
段先森
伊朗@往东行 嘿嘿,这不,时间就这样过去了