业余爱好『Favourite』

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

83 条评论

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

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

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

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

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

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

代码中定义了三组内容：

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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
}];
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 }];
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
    }];

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// 创建小车图标
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 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 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
                    });

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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>";
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>";
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图标

安装运行：

docker运行：

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
docker run -d -p 10086:10086 obaby/baby-footprint:1.0
docker run -d -p 10086:10086 obaby/baby-footprint:1.0
docker run -d -p 10086:10086 obaby/baby-footprint:1.0

 

python 3.8 – 3.10

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
pip install -r requitements.pip
pip install -r requitements.pip
pip install -r requitements.pip

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

 

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
python manage runserver 0.0.0.0:10086
python manage runserver 0.0.0.0:10086
python manage runserver 0.0.0.0:10086

后台登录地址：

 

http://127.0.0.1:10086/admin/

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

修改：

 

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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";
}
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"; }
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反代：

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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;
}
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; }
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://h4ck.org.cn/
* 个性：https://oba.by/
* 本文标题： 《我的足迹【终极完整版】 — 我又更新啦！！！》
* 本文链接：https://liang.si/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

83 comments

1 2
  1. Level 5
    Microsoft Edge 131 Microsoft Edge 131 Windows 10 Windows 10 sg新加坡 Linode

    可惜是百度api。看来我还得自己慢慢整，但是不擅长啊。我想用openstreetmap，但去不掉区域外围的岛屿轮廓。

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

      百度地图前几天给我打电话说需要认证才能长期使用，费用5万。我说我就自己测试用，不考虑付费，然后给开了一个月的体验。到时不能用了再联系延期，所以不用也罢。

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

          嗯嗯，也不复杂。不过不建议百度了，有点恶心人。
          还要什么授权费。

          回复
1 2

发表回复

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

Close Menu