我在博客说发现一篇有意思的文章:「如何用Leaflet创建旅行足迹地图:从快速部署到博客嵌入教程」,快点击阅读原文看看吧!
前言 作为一个喜欢旅行爱拍照的博主来说,一直想要直观的展示自己所见所闻,所以我弄了一个摄影展示站。之后看到过S和小宋有弄过足迹地图,正好满足我的要求——关联博文和地址,很直观的能把走过的地方展现在眼前。市面上地图的软件很多,比如上面两位用的mapsmarker和leaflet,其他的像jVectorMap或者你可以直接用百度,高德和google现成的。 综合考虑之后,我选择了leaflet,因为开源,加上访问速度也不错。那么,就来看看怎么部署和引用到自己的播客吧。这里也参考了码农明明桑的源码。 leaflet的快速部署 首先网页head引用CSS和JS文件,这里用官网推荐的cdn提供商,你也可以直接下载他们的源码部署在服务器上,我后面也是这么做的,这里先做个演示。 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin=""/> <!-- Make sure you put this AFTER Leaflet's CSS --> <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script> 接着,就可以在body部分放入你需要位置放入地图元素 <div id="map"></div> 同时可以需要定义地图容器的固定尺寸 #mapid { hei...