业余爱好『Favourite』

我的足迹【终极完整版】 — 我又更新啦！！！

66 条评论

我的足迹这个东西，周末实现的方法，终究感觉不高级的样子。就是看起来平平无奇，除了那几个点点，剩下的貌似也没什么意思。

扶苏给留言写到他也做了一个足迹页面，说可以作为参考。去参观膜拜了一番，感觉 js 实现的就是要高级一些。

为什么？因为 js 实现的 tm 能动啊。

原本不想写 js 的，主要是懒，实在是不想写代码。但是，但是看到这个东西，难免心动，然后就食言了。我又做了一个。

然后，还是先来看效果吧：

这个是不是看起来就高级了一些？主要是支持点击事件。

代码中定义了三组内容：

locations 点亮城市
passed_locations 途径城市
out_China_locations 国外城市 这一部分加入了经纬度信息，百度地图的反向查询，查出来的坐标是错误的，所以就独立处理了。
    var out_China_locations = [{
        city: "清迈",
        text: "泰国清迈",
        mark: "已经游玩",
        longtitude: 98.96095,
        latitude: 18.79325
    },
    {
        city: "清莱",
        text: "泰国清莱",
        mark: "已经游玩",
        longtitude: 99.72588,
        latitude: 19.903138
    }];

另外，在使用改代码的时候，还需要找两个头像文件，分别用来进行地图打点：

// 创建小车图标
                    var myIcon = new BMapGL.Icon("https://h4ck.org.cn/avatar/avatar_circle-256.png", new BMapGL.Size(26, 26));
                    // 创建Marker标注，使用小车图标
                    // var pt = new BMapGL.Point(116.417, 39.909);
                    var marker = new BMapGL.Marker(point, {
                        icon: myIcon
                    });

点击时间代码，需要修改域名：

var city = locations[i].city;
            var text = "\r\n <a target='_blank' href='" + "https://h4ck.org.cn/?s=" + locations[i].text + "'>  https://h4ck.org.cn/?s=" + locations[i].text + "</a>";

原来的效果：

修改之后，高级感是不是瞬间就有了呢，嘻嘻。

开源代码地址：

https://github.com/obaby/BabyFootprint

参考文档：

https://lbsyun.baidu.com/jsdemo.htm#cLocation

最终效果预览：

https://h4ck.org.cn/footprint/

 

更新：

上面的内容虽然够用了，但是每次还要更新代码，这多蛋疼啊。所以，我又更新了，这次我直接加了一个后台，哈哈哈

Baby 足迹地图

 

简介：

 

基于百度地图的足迹地图。

功能

 

  • 支持后台添加位置信息
  • 支持添加带gps坐标的位置信息
  • 支持自定义marker图标

安装运行：

 

python 3.8 – 3.10

pip install -r requitements.pip

启动服务 建议使用nginx反代：

 

python manage runserver 0.0.0.0:10086

后台登录地址：

 

http://127.0.0.1:10086/admin/

登录账号：obaby
默认密码：123456

修改：

 

前端页面修改js，static/js/footprint.js 编辑以下代码替换默认图标：

var location = locations[i];
var city = locations[i].name;
var text = "\r\n <a target='_blank' href='" + "https://h4ck.org.cn/?s=" + locations[i].text + "'>  https://h4ck.org.cn/?s=" + locations[i].text + "</a>";
var mark = locations[i].mark;
var marker_image = "https://h4ck.org.cn/avatar/avatar_circle-256.png";
if (location.is_passed ){
    marker_image = "https://h4ck.org.cn/avatar/avatar-2.png";
}

截图：

 

后台首页：

 

添加地点：

 

（如果不带gps坐标或者坐标无效，将会通过百度地图api解析gps坐标）

列表：

 

首页：

 

扩展内容 nginx反代：

server
    {
        listen 443 ssl http2;
        #listen [::]:443 ssl http2;
        server_name footprint.h4ck.org.cn ;
        index index.html index.htm index.php default.html default.htm default.php;
        root  /home/wwwroot/footprint.h4ck.org.cn;

        ssl_certificate /home/lighthouse/footprint.h4ck.org.cn_nginx/footprint.h4ck.org.cn_bundle.pem;
        ssl_certificate_key /home/lighthouse/footprint.h4ck.org.cn_nginx/footprint.h4ck.org.cn.key;
        ssl_session_timeout 5m;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
        ssl_prefer_server_ciphers on;
        ssl_ciphers "TLS13-AES-256-GCM-SHA384:TLS13-CHACHA20-POLY1305-SHA256:TLS13-AES-128-GCM-SHA256:TLS13-AES-128-CCM-8-SHA256:TLS13-AES-128-CCM-SHA256:EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5";
        ssl_session_cache builtin:1000 shared:SSL:10m;
        # openssl dhparam -out /usr/local/nginx/conf/ssl/dhparam.pem 2048
        ssl_dhparam /usr/local/nginx/conf/ssl/dhparam.pem;

        include rewrite/none.conf;
        #error_page   404   /404.html;

        # Deny access to PHP files in specific directory
        #location ~ /(wp-content|uploads|wp-includes|images)/.*\.php$ { deny all; }
location /static/ {
       alias    /home/wwwroot/babyfootprint/static/;
}

location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;

        proxy_pass http://127.0.0.1:10099;
        proxy_http_version 1.1;
proxy_set_header Accept-Encoding "";
}
        access_log  /home/wwwlogs/footprint.h4ck.org.cn.log;
    }

11.19 更新内容：

增加文章链接，打卡图片链接：

新效果图：

预览地址：

https://footprint.h4ck.org.cn

代码地址：

https://github.com/obaby/BabyFootprintV2

☆版权☆

* 网站名称：obaby@mars
* 网址：https://obaby.org.cn/
* 个性：https://oba.by/
* 本文标题： 《我的足迹【终极完整版】 — 我又更新啦！！！》
* 本文链接：https://obaby.org.cn/2024/11/18564
* 短链接：https://oba.by/?p=18564
* 转载文章请标明文章来源，原文标题以及原文链接。请遵从 《署名-非商业性使用-相同方式共享 2.5 中国大陆 (CC BY-NC-SA 2.5 CN) 》许可协议。

obaby

obaby

爱好广泛的火星小妖精，有问题欢迎留言交流啊~(✪ω✪) 爬虫类工具请先点击这个链接查看用法https://oba.by/?p=12240 闺蜜圈APP下载 https://guimiquan.cn

You may also like

66 comments

  1. Level 6
    Google Chrome 109 Google Chrome 109 Windows 10 Windows 10 cn中国–上海–上海 腾讯云

    这张图好，玲珑多姿的。
    貌似从C++到Delphi了。

    回复
  3. Level 3
    Firefox 132 Firefox 132 Windows 10 Windows 10 cn中国–上海–上海 联通

    可以再精确一些，不单单只是一个市，可以是这个城市的某一个地点。一个城市多个地点。

    回复
    1. 公主 Queen 
      Google Chrome 130 Google Chrome 130 Android 10 Android 10 cn中国–山东–青岛 联通

      也是可以的 直接使用最后一种坐标定位的方式就行啦。想加多少加多少 哈哈

      回复
  7. Level 5
    Firefox 132 Firefox 132 Windows 10 Windows 10 cn中国–云南–丽江 电信

    后台是怎么管理的呢？怎么把文章和坐标关联起来呢？不会是全部写死再代码里吧

    回复
      1. Level 3
        Safari 18 Safari 18 Mac OS X 10.15 Mac OS X 10.15 cn中国–河北 电信

        哈哈～坐等新版本发布，博客里放个足迹地图，以后逼着自己出去玩～哈哈～

        回复
    1. 公主 Queen 
      Google Chrome 126 Google Chrome 126 Windows 10 Windows 10 cn中国–山东–青岛 联通

      嗯嗯，我又更新了，直接加了个后台，哈哈哈

      回复
  14. Level 5
    Google Chrome 131 Google Chrome 131 Windows 10 Windows 10 cn中国–山东–潍坊 移动

    gis可视化，高级点，可以看看高德地图的足迹，感觉不错。高级感一般就是深色地图背景加上星光点点！

    回复
    1. 公主 Queen 
      Google Chrome 130 Google Chrome 130 Android 10 Android 10 cn中国–山东–青岛 联通

      那个都看烦了 哈哈哈 所有的大屏都是那个效果

      回复
  15.  Level 2
    Safari 17 Safari 17 iPhone iOS 17.6.1 iPhone iOS 17.6.1 cn中国–河南–周口 电信

    为了把两个孩子抚养长大，我已经放弃了理想。忘记了我追逐的梦。

    回复
    1. 公主 Queen 
      Google Chrome 130 Google Chrome 130 Android 10 Android 10 cn中国–山东–青岛 联通

      看嵌入的那个地图效果一般啊 还以为有图片呢
      不难实现 但是实际意义不大

      回复
            1. 公主 Queen 
              Google Chrome 126 Google Chrome 126 Mac OS X 10.15 Mac OS X 10.15 cn中国–山东–青岛 联通

              效果太差，已经更新了弹窗效果了。哈哈哈
              我的足迹弹窗

              回复
                1. 公主 Queen 
                  Google Chrome 126 Google Chrome 126 Mac OS X 10.15 Mac OS X 10.15 cn中国–山东–青岛 联通

                  哈哈哈，我又更新了。也可以是个球子啊
                  地球模式 我的足迹

                  回复
  19. Level 2
    Microsoft Edge 129 Microsoft Edge 129 Windows 10 Windows 10 cn中国–上海–上海 电信

    好纤细的腿呢，确定是没有P过嘛 laugh

    网页的效果好确实是要JS支持下，不过有些高手也能用CSS3来实现，建议看能否参考下航线图，把各点之间用个会动的线连接起来，这样是不是更高级？

    回复
  23. Level 4
    Microsoft Edge 131 Microsoft Edge 131 Windows 10 Windows 10 cn中国–重庆–重庆–丰都县 电信

    没想到有生之年居然能看到你一张还算是正面的照片~

    回复
  24. Level 6
    Microsoft Edge 129 Microsoft Edge 129 Windows 11 Windows 11 cn中国–河南–漯河 联通

    前段时间我写过，扶苏的那个没香港澳门，不过那个是通用方案，所以后来用另外一个了。最起码显示没太多问题。

    回复
    1. 公主 Queen 
      Google Chrome 126 Google Chrome 126 Mac OS X 10.15 Mac OS X 10.15 cn中国–山东–青岛 联通

      这个倒是没注意，不过那个地图显示效果不是十分理想。

      回复
    1. 公主 Queen 
      Google Chrome 126 Google Chrome 126 Mac OS X 10.15 Mac OS X 10.15 cn中国–山东–青岛 联通

      毕竟一次次的改代码更新有些麻烦。
      直接一劳永逸。哈哈哈

      回复
  28. Level 4
    Google Chrome 131 Google Chrome 131 Windows 11 Windows 11 cn中国–陕西–西安–鄠邑区 移动

    在美女的耐心帮助下，终于安装成功了 ，谢谢X7

    回复

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Close Menu