好文收藏

仅个人收藏，已屏蔽搜索。

qqmba | 满心记 ： 用百度地图做个足迹地图

In 其他

本文转自： https://qq.mba/242.html
仅做个人收藏，版权归原作者所有

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

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

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

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

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

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

发表回复

Related Posts

2022 Predictions

解析小型互联网公司成功的关键要素

Letters Archive – Dan Koe ： The $1 Million Product: How To Package & Market Your Knowledge

也谈钱 ： 该配多少海外投资？