本文最后更新于413 天前,其中的信息可能已经过时,如有错误请发送邮件到3046699620@qq.com
站长未来的目标是游遍大江南北,所以建站以来就一直想实现一个记录旅行足迹的页面。用游记的形式来记录每一次去的地方以及发生的故事,还是一件很有意义的事情。不同于朋友圈以及qq空间的记录形式,游记可以做到图文并茂,并且能在一定程度上提高自己写作水平。
本想着邀请一些朋友入驻后,博客会热闹一点,但忘记我的大部分朋友都是“土狗”(当然我也是个“土狗”,如果我的朋友们感觉冒犯到了,请联系我删掉这句话),写日记都懒得写,写文章更别说,目前博客也就我天天写点有的没的。经过多方面的了解和调研,发现博客在我的朋友之中并不受众,他们要么会选择在微博记录,要么就是压根不记录,这样看来,让博客看起来没有那么冷清,得靠我自己了。
回归正题,那么如何实现这个简易版的旅行足迹呢?
查阅一些资料,发现这个页面可以用四种方法实现,分别是使用jVectorMap、echart、wp插件、高德地图开放接口。这四种方式我都使用过,使用echart以及jVectorMap需要编写代码,因为对php的内容还不是很熟悉,所以尝试过后就放弃了。也尝试过使用wp插件,用wp插件实现是最快、最好、最美观的方式,但许多插件的功能是需要付费的,想要实现我想要的功能大部分都是付费内容,目前我也没有找到好用且免费的插件,后续如果找到了,还是会优先选择使用插件。所以最终这个简易版就是使用的高德地图开放接口https://lbs.amap.com/tools/creater,高德地图开放接口可以添加一些标记在你想要的位置,并且标记完成后会给你生成html代码,这简直就是懒人福音。
那么问题来了,如果下次有新去的地点,添加标记岂不是要从头来过,显得有点麻烦,所以我又去研究了一下它自动生成的代码,发现只需要在字典中添加地点的经纬度以及一些描述就可以做到不从头来过。
原计划是想实现点击地点就直接链接到对应的游记,目前只是将游记的地址放在了描述里面,想要查看还要复制链接,实在麻烦,又去研究了一下代码,发现只用修改红色方框内的代码,在这个地方添加一个a标签,就能实现。
又发现了新的问题,怎么获取每一个图标下的链接。因为这个函数获取每一个标签的方式是通过一个数据,exeData.name就是每一个地点标签的名字,所以回到刚刚的字典,我给每个图标又添加了一个新的字段用来保存每个地点的游记链接。
修改红框中的代码为下图内容,经过实验,成功实现。
这样看来,如果只基于这个高德地图的代码,还是可以把这个页面实现的更好,但目前时间有限,足迹简易版就做到这了,后续如果有更好idea再来更新。