用百度地图做个足迹地图

今天看到小生博客的文章，就花了点时间整到我的博客里了，考虑要不要单独做成页面，想了下，还是放关于页里面，后续看情况，要不要独立出来。

预览效果，有兴趣的可以往下看，比较简单：

一、申请百度地图账号，创建应用

百度地图，百度要求实名认证。

注意：创建应用要选择【浏览器端】

以上全部通过后，获取 访问应用（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源码

发表评论

瓦匠 Lv1 37分钟前回复

厉害了
我当时也想用脚印来标记，后面感觉不是很搭，就用来自带的

福建省厦门市电信 · /
紫慕 Lv1 2小时前回复

足迹还真是一个脚印，👣~挺有趣的，之前也想着搞过，后来就放弃了。我觉得高德那个点亮城市就很对。

四川省成都市联通 · /
网友小宋 Lv4 3小时前回复

那个脚印变成一个原点会不会更好一下。我是用Leaflet做的，哪天有空给整成typecho插件吧

河南省漯河市联通 · /
1. 满心博主 3小时前回复
  
  @网友小宋期待你的插件
  
  北京市广电网 · /
kbr Lv1 4小时前回复

我的网站就是用的插件实现的。足迹页面就是的。

上海市移动 · /
1. 满心博主 3小时前回复
  
  @kbr 你的也不错呀，啥插件
  
  北京市广电网 · /
  1. kbr Lv1 2小时前回复
    
    @满心安装插件:后台搜索旅行地图即可安装
    
    上海市移动 · /
寻鹤 Lv1 6小时前回复

我用了其他作者的地图插件，还可以关联到文章哈哈

广西南宁市联通 · /
1. 满心博主 4小时前回复
  
  @寻鹤是嘛，啥插件
  
  湖北省武汉市电信 · /