Tag: 互联网

上次折腾了个人百度足迹地图，积累了点经验，现分享给大家，如有兴趣都可以学着做一个。二话不说，先放出代码，点击下载。

压缩包含三个文件以及一个文件夹，其中“x1.php”是主题模板，模板是放在主题文件夹下供新建页面选用，里边对应地址路径请自行修改，后面我会解释。另外两个是html页面文件，其中“x3.html”这个是地图核心页面，附带大量的JavaScript，凭借这些实现功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。而“x2.html”是作为强制刷新跳转页面，用途后面会讲到。

“x3.html”页面可以直接本地打开进行调试，首先您需先申请密钥（ak），然后将这串密码放在第6行代码对应位置方可使用。其他需要修改的地方旁边的注释都有说明。最核心的区域就是添加数组，“var infos =”这行后边的内容，每一项用英文逗号“,”隔开了，依次顺序是：文章标题、坐标、地址、文章链接、图片链接。

模板只会在地图上生成两个标点，照着复制粘贴可以得出N多个标点。每个数组区域的格式是严格规定好的，其中坐标是必填项（没有坐标则无法生成标点），其他如果嫌麻烦的话，可以留空。留空就是不写，但不能删除，否则数组顺序会错乱，导致地图标点无法生成。

关于坐标，由于我们使用的是百度地图API，因此可以使用百度地图的坐标拾取服务，在对应地图上拾取坐标，点击这里直达百度地图坐标拾取系统。

对于有GPS信息的照片（很多手机拍出的照片都会带有位置信息）可以通过附带的“照片GPS信息导出”批量将对应照片的GPS信息导入表格，然后通过“GPS度分秒转换.xlsx”这个表格，批量转换成百度地图坐标格式。在这我要提醒一点，导出来出来的设备硬件GPS坐标信息直接放在百度地图上使用的话会有几百米至一公里不等的偏移，这种偏移的原因不明（你懂的），因此这些原始坐标，需要通过百度地图的坐标转换服务，进行转换，转换之后的坐标才可以用在百度地图上。

至此，有了主题模板，也有了地图核心页面，再加上坐标获取的方式，基本就差不多了。如果不用“x2.html”这个文件，咱也能做出个人足迹地图，可是有缓存的情况下，修改编辑“x3.html”这个页面后，客户端可能无法刷出最新结果。我的解决办法是通过“x2.html”这个辅助在地址栏生成随机数来请求最新页面，这样无论何时修改，访客都能刷出最新的标记结果。所以，整个重定向链路是“x1.php”请求“x2.html”再请求“x3.html”。

讲解就到此，照着做相信都不难了，繁琐之处在于手工添加地图标点，鄙人的代码本领还没法做到通过数据库以及表单窗口等进行简化，若哪位是代码大神，能将这接口啥的做成插件，将标点数据存入单独一张数据库表中，那大伙就可以跪拜了，嘿嘿！