今天看到 小生博客的文章，就花了点时间整到我的博客里了，考虑要不要单独做成页面，想了下，还是放 关于页里面，后续看情况，要不要独立出来。
预览效果，有兴趣的可以往下看，比较简单：
一、申请百度地图账号，创建应用
百度地图，百度要求实名认证。
注意：创建应用要选择【浏览器端】
以上全部通过后，获取 访问应用（AK）
二、创建map.php
<?php
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的旅行足迹</title>
<style>
#container {
flex: 1;
width: 100%;
height: 100%;
border-radius: 10px;
}
/* 信息窗口样式 */
.info-window {
padding: 0;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
text-align: center;
border: none;
background: #fff;
overflow: hidden;
}
.info-header {
text-align: center;
}
.info-header h3 {
margin: 0;
font-size: 20px;
font-weight: 600;
color: #333;
text-align: center;
}
.info-content {
padding: 0 15px 15px;
text-align: center;
}
.info-content p {
margin: 0 0 15px;
font-size: 14px;
line-height: 1.6;
color: #666;
text-align: center;
}
.info-content .photos {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.info-content img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.info-content a:hover img {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.BMap_cpyCtrl,
.anchorBL {
display: none !important;
}
</style>
</head>
<body>
<!-- 地图容器 -->
<div id="container"></div>
<!-- 引入百度地图API -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak= 你的KEY"></script>
<!-- 引入足迹点数据 -->
<script src="<?php $this->options->themeUrl('style/markers.js'); ?>"></script>
<!-- 地图初始化和足迹点添加 -->
<script>
// 地图初始化
var map = new BMapGL.Map("container");
var point = new BMapGL.Point(108.219771, 34.933863);
map.centerAndZoom(point, 5); // 初始化地图，设置地图级别为5
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
console.log(map);
// 设置地图样式
map.setMapStyleV2({
styleId: 'e538ad167219263086d18744cc59cd32'
});
// 添加足迹点和信息窗口
markers.forEach((element) => {
let point = new BMapGL.Point(element.latLng[0], element.latLng[1]); // 创建坐标点
var marker;
// 如果有自定义图标，则使用自定义图标
if (element.icon) {
var myIcon = new BMapGL.Icon(element.icon, new BMapGL.Size(26, 26));
marker = new BMapGL.Marker(point, { icon: myIcon });
} else {
marker = new BMapGL.Marker(point); // 创建默认标记
}
map.addOverlay(marker); // 将标记添加到地图上
// 创建信息窗口
let opts = {
width: 320, // 信息窗口宽度
height: 0, // 信息窗口高度
enableMessage: false, // 禁用默认的关闭按钮
enableCloseOnClick: true, // 点击地图关闭信息窗口
};
// 构建信息窗口内容
let info = `
<div class="info-window">
<div class="info-header">
<h3>${element.name}</h3>
</div>
<div class="info-content">
<p>${element.desc}</p>
<div class="photos">`;
if (element.photo && element.photo.length > 0) {
element.photo.forEach((photoUrl, index) => {
// 获取对应的链接
let linkUrl = element.links ? element.links[index] : "#";
// 添加图片链接
info += `<a href="${linkUrl}" target="_blank"><img src="${photoUrl}" alt="Image ${index + 1}"></a>`;
});
}
info += `
</div>
</div>
</div>`;
let infoWindow = new BMapGL.InfoWindow(info, opts); // 创建信息窗口对象
// 为标记点添加点击事件
marker.addEventListener("click", function () {
map.openInfoWindow(infoWindow, point); // 打开信息窗口
});
});
</script>
</body>
</html>
<?php
?>
三、创建marker.js
// 坐标查询：https://api.map.baidu.com/lbsapi/getpoint/index.html
var markers = [{
latLng: [89.255025, 42.99805],
name: "葡萄沟",
icon: "zj.png",
desc: "转车的时候下去看了看，确实和书本上描述的一样。"
},
{
latLng: [75.996862, 39.476993],
name: "喀什",
icon: "zj.png",
desc: "一出生就过去了，从小长大的地方，呆过十几年，不过现在已经没什么印象了。"
},
{
latLng: [116.280592, 40.004567],
name: "颐和园",
icon: "zj.png",
desc: "有点古典风格，到此处，感觉自己也有点儿儒雅的气质。"
},
{
latLng: [116.024067, 40.362639],
name: "八达岭长城",
icon: "zj.png",
desc: "不到长城非好汉，我去了五六次，应该是绝对的好汉了吧！"
},
{
latLng: [116.403414, 39.924091],
name: "故宫",
icon: "zj.png",
desc: "记得那会儿应该是20年前的事儿了。"
},
{
latLng: [116.079068, 40.296759],
name: "居庸关长城",
icon: "zj.png",
desc: "体验感一般，去过的人都不会选择再去了。"
},
{
latLng: [120.127813, 30.228902],
name: "西湖",
icon: "zj.png",
desc: "之前工作住周边，有事儿没事儿就去西湖转转，估摸着应该转了几十圈了吧。"
},
{
latLng: [120.155526, 30.236867],
name: "雷峰塔",
icon: "zj.png",
desc: "其它区域都是免费，维度雷峰塔要收费，原因是要坐船过去。"
},
{
latLng: [124.831767, 45.148014], // 图文带跳转的
name: "松原市",
icon: "zj.png",
desc: "松原市。",
photo: [
"https://img0.baidu.com/it/u=3915829036,420838185&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1083",
"https://img0.baidu.com/it/u=3915829036,420838185&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1083",
"/usr/uploads/2025/01/1454283446.jpg",
"/usr/uploads/2025/01/3919603999.jpg",
],
links: [
"/index.php/archives/138/",
"/index.php/archives/138/",
"/index.php/archives/138/",
"/index.php/archives/138/",
]
},
];
四、嵌入使用
我这里是直接在关于页面引入，选择引入地方直接写好地址即可，我这里没有单独做页面，有需要做页面也可以单独改一下。
<?php $this->need('parts/map.php'); ?>
我简单实现了下，可以根据自己主题进行调整，特别是样式，需要根据自己主题进行适配；
参考文章：利用百度地图做博客足迹地图HTML源码
