普通视图

发现新文章,点击刷新页面。
昨天以前首页

Merry Christmas🎄

2024年12月25日 11:27

原本,按照自己的想法是不准备再写文章的。前段时间,自己抽了那么一点点的时间,做了一个个人页面,http://i.oba.by .期间,杜郎杜郎给提了不少建议。但是鉴于自己 ps 修图的水平实在有限,所以最终很多东西也没达到自己想要的效果。

然而,昨天看下面的足迹地图的时候,发现出问题了,全部被贴上了未获取商用授权的水印。

这就很离谱,后来登录百度地图开发者,才发现一个问题,那就是认真的时候不小心给认证成了企业开发者,这尼玛就离谱。当时还在想,为什么提示填写企业邮箱更容易认证通过。

后来才发现,默认就是认证企业开发者,个人开发者被藏在了隐蔽的地方。只能切换账号重新认证。

不过这么一来,那么地理编码就会出现问题,因为目前接入的地理位置已经超过 30 个。调用这个接口就会收到下面的提示:

的确,各种限制无处不在。不过好在之前设计的时候给每个地点预留了 gps 坐标信息,如果已经有了 gps 坐标,那么就不会再调用 jsapi 进行解析。

添加服务端 ak,直接后台处理坐标之后,写入数据库:

def process_location_cordinate(self, request):

    baidu_key_set = MapKey.objects.filter(server_key__isnull=False).last()
    if baidu_key_set is None:
        return ErrorResponse(msg='请先配置百度地图服务端 key')

    locations = Location.objects.all()
    successed = []
    for l in locations:
        if l.latitude is None or l.lontitude is None:
            lng,lat = get_location_cordinate(l.name, baidu_key_set.server_key)
            if lng is not None and lat is not None:
                l.latitude = lat
                l.lontitude = lng
                l.save()
                print(l)
                successed.append(l)
    return DetailResponse(self.get_serializer(successed, many=True).data)

地理位置解析代码:

def get_location_cordinate(location_name, server_key):
    resp = requests.get('https://api.map.baidu.com/geocoding/v3/?address='+location_name+ '&output=json&ak='+ server_key)

    print(resp.json())
    js = resp.json()
    if js['status'] == 0:
        return js['result']['location']['lng'],js['result']['location']['lat']
    return None, None

在处理之前,去后台设置 服务端 ak。

相关代码已经更新,见开源项目:https://github.com/obaby/BabyFootprintV2

再次祝大家圣诞快乐,嘻嘻

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

2024年11月18日 13:41

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

扶苏给留言写到他也做了一个足迹页面,说可以作为参考。去参观膜拜了一番,感觉 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

后台登录地址:

 

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

创建一个我的足迹地图

2024年11月16日 17:41

关于我页面,有个个人足迹的图片。

这个图片最早是通过google maps的足迹地图来生成的。

谷歌地图

然而,好景不常,这个东西现在也下架了,今年又去了很多地方,但是这个图片要更新就变得非常麻烦,总不能用ps往上打点吧?这也有点太智障了。于是想着通过地图来实现这个功能,高德或者百度,上午试了一下高德,发现免费的静态地图,最多只能添加10个marker,这尼玛是出来恶心姐姐我的吗?就离谱。

下午看了下百度的要好很多,于是下午折腾了一下,把足迹点,通过代码拼成url直接添加图片就能显示了,这个还是不错的,最终效果如下:

我的足迹

其中粉色点点是最起码呆过一段时间的,黄色的点点是途径点。

处理的代码也比较简单,不过最开始用的高德,于是gps坐标获取用的高德的api,需要提供高德的key。

静态地图用的百度的,所以又需要百度地图的ak,这个ak必须用服务端的ak哈。全部代码如下,没做配置功能,需要的自己改改代码就行了(运行前 pip install requests 依赖库):

import time

import requests


def amap_geodecode(addr):
    try:
        para = {
            'key': '高德的key',  # 高德地图开放平台申请的key
            'address': addr  # 传入地址参数
        }
        url = 'https://restapi.amap.com/v3/geocode/geo?'  # 高德地图API接口
        req = requests.get(url, para)
        req = req.json()
        print('-' * 30)
        print(req)
        m = req['geocodes'][0]['location']
        print(addr)
        print(m)
    except:
        return None
    return m


# 按装订区域中的绿色按钮以运行脚本。
if __name__ == '__main__':
    url_bast = 'https://api.map.baidu.com/staticimage/v2?ak=<百度的ak>&width=900&height=800&zoom=5&center=103.8319522831,36.0615585627&markerStyles=0xFF0000|0x808000&markers='
    city_list = ['北京','上海','深圳', '东营','连云港','锡林郭勒盟','赤峰','承德','济南','泰安','枣庄','昆明','长沙','湘潭','株洲','日照','威海','烟台','深圳','广州','西安','临沂','潍坊','青岛','大理','清迈','海口','三亚','蜈支洲岛','清莱']
    pass_city_list = ['天津','德州','景德镇','衢州','佛山','无锡']

    print('添加点亮城市:')
    cord_list = []
    visited_marker_style_list = []
    for c in city_list:
        m = amap_geodecode(c)
        if m:
            v = '' + m
            cord_list.append(v)
            visited_marker_style_list.append('m,V,0xFF69B4')
        time.sleep(2)
    print('添加途径城市:')
    for c in pass_city_list:
        m = amap_geodecode(c)
        if m:
            v = '' + m
            cord_list.append(v)
            visited_marker_style_list.append('s,P,0xFFFF00')
        time.sleep(2)

    print(cord_list)
    print('|'.join(cord_list))
    print('最终url:')
    print(url_bast + '&markerStyles=' + '|'.join(visited_marker_style_list) + '&markers=' + '|'.join(cord_list))

别问为啥这么搞,问就是懒得改了,哈哈哈。添加图片直接使用最后的url即可。以后足迹点多了之后,修改list重新生成url即可。

唯一的缺点,不支持国外的坐标,我的泰国的坐标标不上,不过也无所谓了,反正就一个泰国而已。

更多定制化功能,参考百度地图的相关开发文档:

https://lbsyun.baidu.com/faq/api?title=static/prepare

https://lbsyun.baidu.com/faq/api?title=static/markerStatic

https://lbsyun.baidu.com/faq/api?title=static/heightStatic

利用Leaflet的想法构建足迹地图

2024年9月29日 14:38

前言

足迹地图我很早就知道咯,一直没有办法实现它,大发的地图插件Marker Pro很喜欢,但只是看看而已。直到发现了它——Leaflet,一个开源JavaScript库,适用于适合移动设备的交互式地图。
只不过我的博客在国内,想着多一事不如少一事,图源换成国内的应该好点儿(我换成高德了),原理它差不多。就像博友说的,使用国外图源,一不小心,把一小块地画给国外,就是勾结外部势力了。话不多说,上教程。

步骤

我的想法是新建页面模版,独立页面显示。

1、准备工作

新建footprint.js文件,footprint.js文件应包含你的足迹点数据,上传这个文件到你主题目录的js文件里,比如:

/wp-content/themes/your-theme/js/footprint.js

 

footprint.js文件的内容

const footprint = [ ["<b>银川</b><i>Yinchuan</i><a href='https://www.duanxiansen.com/84.html/'>银川镇北堡西部影视城三日游</a>", 38.46667, 106.26667], ["<b>榆中</b><i>Yuzhong</i><a href='https://www.duanxiansen.com/1303.html/'>记第一次滑雪</a>", 36.0620781, 103.8318566], ["<b>白银</b><i>Baiyin</i><a href='https://www.duanxiansen.com/1115.html/'>游黄河石林景区(公司第一次团建)</a>", 36.5340173, 104.1467575], // 添加更多点 ];

 

2、创建自定义页面模版文件

新建page-map.php文件,放在你的主题页面模版文件夹里。

<?php
/*
Template Name: 足迹地图
*/

get_header(); ?>

<style>
#map {
    width: 100%;
    max-width: 1200px; 
    height: 500px; 
    margin: 0 auto; 
}
</style>

<div id="map" class="other-map"></div>

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德地图API密钥"></script>

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/footprint.js"></script>

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    var map = new AMap.Map('map', {
        center: [116.397128, 39.916527],
        zoom: 4
    });

    if (typeof footprint !== 'undefined' && footprint.length > 0) {
        for (let i = 0; i < footprint.length; i++) {
            const [popupText, lat, lng] = footprint[i];

            var marker = new AMap.Marker({
                position: new AMap.LngLat(lng, lat),
                map: map
            });

            marker.on('click', function() {
                var infoWindow = new AMap.InfoWindow({
                    content: popupText,
                    offset: new AMap.Pixel(0, -30)
                });
                infoWindow.open(map, marker.getPosition());
            });
        }
    } else {
        console.error('footprint array is undefined or empty');
    }
});
</script>

<?php get_footer(); ?>

自行申请高德地图API密钥。注意上述代码中js的路径

/js/footprint.js"

结尾

过程很复杂,我简化了步骤,直接操作会很简单,不过相比较使用Leaflet,任有许多不完美之处,比如点击标记点显示文章图片,Leaflet会自动生成缩略图,而这个显示原图,所以我去掉了图片显示。鼠标滑过标记点,Leaflet会自动显示标记点文章,而这个需要点击标记点,而且点开之后需要手动关闭才能浏览下个标记点。Leaflet则不需要,随便点击空白处就关闭了。相比较,Leaflet更完美,体验感更足。

 

❌
❌