最近在很多博友的博客中,都看到了旅行足迹的制作。其实早在今年的上半年,就看到过一些了,一直想着哪天自己也来做一个,结果就搁浅到了年底。最终,再也忍不住手痒,这两天里凑了点时间,把旅行足迹给做了。
旅行足迹1 -> https://chrison.cn/travel.html
旅行足迹2 -> https://chrison.cn/travel_2.html
参考博客 -> 晴空树、荒野孤灯、obaby
前言
制作旅行足迹的工具有很多了,高德地铁、百度地图、腾讯地图、Jvectormap、leaflet...等都可以。选来选去,还是选择了稍微熟悉点的高德地图来制作足迹。
申请高德key和安全密钥
登录高德开放平台控制台,如果没有开发者账号,请注册开发者。然后进入应用管理,创建新应用,新应用中添加 key,服务平台选择 Web端(JS API)。最后创建成功后,可获取 key 和安全密钥。
生成初始地图
1、html文件:
♾️ html 代码:2、JS API 的加载和地图初始化
♾️ javascript 代码:3、为地图点标记 Marker
♾️ JavaScript 代码:4、这样,你的页面就已经可以展示一个标记了城市的地图了。
正式开始制作自己的旅行足迹👣
HTML页面准备
我们定义一个div并设置id,并在样式中,设置一个宽高。
♾️ html 代码:旅行足迹 - 列出你的城市
上面已经写过了,所以下面,我们所有的代码,都在初始化的then函数中完成。
首先,定义一个你的城市列表city_list:adcode是城市编码,点击 城市编码表 下载。name是你要在地图上展示的城市名。center是城市经纬度,可在 坐标拾取器 获得。opacity是不透明度(1.0-10.0),不同城市可展示不同的深浅颜色,自己随便定义。desc是弹窗的html内容,自定义即可。
旅行足迹 - 在地图上标注城市
LabelsData是要标注的城市列表。
directions是要避让的城市列表。(作用是,当两个城市距离非常近时,可以改变两者的位置关系,错开一点显示)
getColorByDGP是城市标记的颜色。
rgb(202,235,216)表示不是你的旅行城市所标记的颜色
rgba('+ r +','+ g +','+b+','+a+')表示是你的旅行城市所标注的颜色。a则是上面的不透明度
旅行足迹 - 展示地图并标记城市
1、new AMap.DistrictLayer.Province是高德省市简易行政区图层。style中的fill就是填充所有城市信息。
2、new AMap.Map("container",{});则是正式初始化地图,并加载上面的行政区图层。
3、map.addControl(new AMap.Scale());和map.addControl(new AMap.ToolBar({liteStyle:true}));是两个控件,需要在JS初始化时,配置插件列表plugins: ["AMap.ToolBar", "AMap.Scale"]。
4、map.on('complete',function(){})则是在地图初始化完成后,开始标注你的旅行城市信息及弹窗界面信息。
旅行足迹 - 大功告成,展示你的足迹吧!
旅行足迹1 -> https://chrison.cn/travel.html
旅行足迹2 -> https://chrison.cn/travel_2.html
👍
💖
💯
💦
😄
🪙
博主
Chrison @Frank👍
💖
💯
💦
😄
🪙
👍
💖
💯
💦
😄
🪙
博主
Chrison @林羽凡👍
💖
💯
💦
😄
🪙
好友
Jdeal👍
💖
💯
💦
😄
🪙
博主
Chrison @Jdeal👍
💖
💯
💦
😄
🪙
好友
Jdeal @Chrison👍
💖
💯
💦
😄
🪙
博主
Chrison @Jdeal👍
💖
💯
💦
😄
🪙
好友
Jdeal @Chrison👍
💖
💯
💦
😄
🪙
博主
Chrison @Jdeal👍
💖
💯
💦
😄
🪙
好友
Teacher Du👍
💖
💯
💦
😄
🪙
博主
Chrison @Teacher Du👍
💖
💯
💦
😄
🪙
好友
荒野孤灯👍
💖
💯
💦
😄
🪙
博主
Chrison @荒野孤灯👍
💖
💯
💦
😄
🪙
好友
团团👍
💖
💯
💦
😄
🪙
👍
💖
💯
💦
😄
🪙
博主
Chrison @黑桃三👍
💖
💯
💦
😄
🪙
博主
Chrison @团团👍
💖
💯
💦
😄
🪙