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

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