我的足迹这个东西,周末实现的方法,终究感觉不高级的样子。就是看起来平平无奇,除了那几个点点,剩下的貌似也没什么意思。
扶苏给留言写到他也做了一个足迹页面,说可以作为参考。去参观膜拜了一番,感觉 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图标
安装运行:
docker运行:
docker run -d -p 10086:10086 obaby/baby-footprint:1.0
python 3.8 – 3.10
pip install -r requitements.pip
启动服务 建议使用nginx反代:
python manage runserver 0.0.0.0:10086
后台登录地址:
登录账号: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"; }
- marker_image 默认图标
- https://h4ck.org.cn/avatar/avatar-2.png 经停点图标
- https://h4ck.org.cn/?s= 弹出卡片搜索地址以及链接地址
截图:
后台首页:
添加地点:
(如果不带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://github.com/obaby/BabyFootprintV2
77 comments
这张图好,玲珑多姿的。
貌似从C++到Delphi了。
这~~~
哇哇哇,这个好有创意!效果好棒!
你最好说的是地图
就是地图啦,我还给我朋友推荐啦,他 把页面收藏啦,打算以后也部署一个
嗯嗯
哈哈,确实高级不少哇
嗯嗯 主要是也不用换图片链接了。
可以再精确一些,不单单只是一个市,可以是这个城市的某一个地点。一个城市多个地点。
也是可以的 直接使用最后一种坐标定位的方式就行啦。想加多少加多少 哈哈
这个地图访问好快
嗯嗯,百度地图的速度还是可以的
会玩~
高级吧
高级高级~~~果然 小仙女实力非凡~推荐给我博友看看
我在写一点更新的东西,哈哈哈
后台是怎么管理的呢?怎么把文章和坐标关联起来呢?不会是全部写死再代码里吧
没关联,根据地名进行全站搜索。
牛啊牛啊牛,我在这里也看到一个,人家那个是收费的~先收藏,省的下来你再收费~哈哈!
https://fatesinger.com/100405
我还在更新,稍后发布新版本,哈哈哈
哈哈~坐等新版本发布,博客里放个足迹地图,以后逼着自己出去玩~哈哈~
把泰国给补上了
是哒,哈哈哈。
一个人的,熙熙攘攘。
嗯嗯,主打一个瞎折腾。哈哈哈
厉害。mark一下。
嘎嘎,我又加了个后台。
不懂不懂,我这个懵懂的年龄😮
JavaScript 是世界上最好的语言 ⸂⸂⸜(രᴗര )⸝⸃⸃
嗯嗯,我又更新了,直接加了个后台,哈哈哈
gis可视化,高级点,可以看看高德地图的足迹,感觉不错。高级感一般就是深色地图背景加上星光点点!
那个都看烦了 哈哈哈 所有的大屏都是那个效果
为了把两个孩子抚养长大,我已经放弃了理想。忘记了我追逐的梦。
好久没出过省啦
成年人的生活就是这样的 重复而又平淡
真好看,回去试试静态能不能实现哈哈
肯定可以的
这个厉害了。还去了不少地方了
https://wpapi.aliluv.cn/maps
很早以前我用过这家的,但是它是全球的不适合,它的点击显示文章我觉得可以借鉴一下。
看嵌入的那个地图效果一般啊 还以为有图片呢
不难实现 但是实际意义不大
红色带数字的不带图片,其他的都带啊。
啥图片?就这个啊?
也不高级啊~~
是哩
效果太差,已经更新了弹窗效果了。哈哈哈
一觉醒来更加高端大气上档次了!
哈哈哈,我又更新了。也可以是个球子啊
你这是接了谷歌地球的项目啊
哈哈哈,百度地球
好纤细的腿呢,确定是没有P过嘛
网页的效果好确实是要JS支持下,不过有些高手也能用CSS3来实现,建议看能否参考下航线图,把各点之间用个会动的线连接起来,这样是不是更高级?
p过啊
时间跨度大 连线也没啥意义
你说,能不能,点击每一个坐标,就显示一张打卡照啊
可以的
已经实现了,哈哈哈
666.我也在弄了。就剩配图加文字了。
可以直接docker部署了~~
docker run -d -p 10086:10086 obaby/baby-footprint:1.0
哈哈哈,我是自己用高德搞的。欢迎指导,哈哈哈
https://chrison.cn/travel.html
高德的也不错~~
这个牛逼。
嘻嘻
这是又更新版本了吗
是哒
没想到有生之年居然能看到你一张还算是正面的照片~
卧槽 这描述 哈哈哈
前段时间我写过,扶苏的那个没香港澳门,不过那个是通用方案,所以后来用另外一个了。最起码显示没太多问题。
这个倒是没注意,不过那个地图显示效果不是十分理想。
一个比一个6,我上午刚看完扶苏的,你这个带后台,配置更方便。
毕竟一次次的改代码更新有些麻烦。
直接一劳永逸。哈哈哈
膜拜一下 连后台都有了~
是哒
这行啊,科技感十足!
赶紧来一个
在美女的耐心帮助下,终于安装成功了 ,谢谢X7
客气啦,嘻嘻
她没来过武汉啊
嗯嗯,武汉还没去过呢。有机会肯定会去哒