前言
作为一个喜欢旅行爱拍照的博主来说,一直想要直观的展示自己所见所闻,所以我弄了一个摄影展示站。之后看到过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 { height: 180px; }
这里方便演示,就放一块儿,直接指定了
<div id="map" style="height: 500px; width: 500px"></div>
这里就已经做好初始化地图的准备了,接下去我们设置地图
var map = L.map('map', {gestureHandling: true, minZoom: 1, maxZoom: 10}).setView([33.3007613,117.2345622], 1);
// 设置地图,并绑定到id为'map'的元素上,同时开启手势,设置放大和缩小的极限值,设置中心经纬度坐标,初始视角放大等级为1(全球地图)
这时候你访问这个文件,只能看到有个地图的框,是没有内容的,那么,我们需要给地图加上瓦片图层细想这个翻译还蛮贴切的,教程里我们也使用官方给数据,提一嘴,leaflet对于使用他们的开源服务是有明确版权要求的,详见瓦片使用政策。
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { // 官方瓦片服务,{z}{x}{y}分别表示缩放等级,瓦片列,瓦片行
maxZoom: 10, // 最大缩放等级
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' // 版权声明
}).addTo(map);
现在我们就可以看到地图正常显示了,那么,怎么增加标记点呢?leaflet提供了不同的标记方法,这里我们使用圆形mark
marker = new L.circleMarker([40.190632,116.412144], { // 标记坐标
radius: 10, // 标记半径
color: '#305370', // 标记颜色
fillOpacity: 0.35, // 标记透明度
stroke: false, // 是否增加标记边框
}).bindPopup("<b>北京</b><i>Beijing</i>").addTo(map); // 弹出框内容
嵌入博客
我是用的博客是typecho系统+VOID主题,要引入到博客,可以使用博客系统自带的模板,所以我参考归档页面编写了旅行这个页面。内容基本上和上面写的差不多,主要有以下几点:
- 下载官网的源码替换cdn提供的js和css文件
- 选用carto提供瓦片服务
- 额外引用一个js文件来编写坐标,这样就不需要去改这个页面源码,每次在js中增加坐标文件就可以达到添加标记点的目的了
- 引入分类为“旅行”的文章,自动转换成卡片展示
我简单说下上面这几点吧:
官网地址:下载,下载完后放到你的服务器中,然后在头文件引入
<!--地图资源-->
<link rel="stylesheet" href="你的服务器地址/leaflet/leaflet.css" />
<!--地图资源-->
<script src="你的服务器地址/leaflet/leaflet.js"></script>
第二点,改用carto瓦片服务
var cartodbAttribution = '© <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors, © <a href="https://carto.com/attribution" target="_blank">CARTO</a>';
var map = L.map('map', {gestureHandling: true, minZoom: 1, maxZoom: 10}).setView([33.3007613,117.2345622], 2);
map.zoomControl.setPosition('topright');
map.createPane('labels');
map.getPane('labels').style.zIndex = 650;
map.getPane('labels').style.pointerEvents = 'none';
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
attribution: cartodbAttribution
}).addTo(map);
额外的js文件
let points = [
["<b>广州</b><i>Guangzhou</i><p></p>", 23.1220615,113.3714803],
["<b>深圳</b><i>Shenzhen</i><p></p>", 22.5445741,114.0545429],
["<b>上海</b><i>Shanghai</i><p></p>", 31.2356383,121.4693327],
["<b>南京</b><i>Nanjing</i><p></p>", 32.0743982,118.7955266],
["<b>杭州</b><i>Hangzhou</i>", 30.2450166,120.0915979],
["<b>大阪</b><i>Osaka</i><p></p><p>17年旅行</p>", 34.6545464,135.4289211],
["<b>京都</b><i>Kyoto</i><p></p><p>17年旅行</p>", 34.9675192,135.7797101],
["<b>奈良</b><i>Nara-ken</i><p></p><p>17年旅行</p>", 34.6838455,135.8483084],
["<b>罗马</b><i>Rome</i><p></p><p>19年旅行</p>", 41.902782,12.496366],
["<b>锡耶纳</b><i>Siena</i><p></p><p>19年旅行</p>", 43.318749,11.330757],
["<b>佛罗伦萨</b><i>Florence</i><p></p><p>19年旅行</p>", 43.769562,11.255814],
["<b>米兰</b><i>Milan</i><p></p><p>19年旅行</p>", 45.464211,9.191383],
["<b>小樽</b><i>Otaru</i><p></p><a href='/archives/hokkido-9day-travel.html'><img src='https://pic.pinaland.cn/uploads/2024/02/02/65bc84ff51fe7.jpg' alt='小樽'/>北海道9日纯自由行攻略</a>", 43.190701,140.994692],
["<b>札幌</b><i>Sapporo</i><p></p><a href='/archives/hokkido-9day-travel.html'><img src='https://pic.pinaland.cn/uploads/2024/03/04/65e5d12a71eac.jpg' alt='初音'/>北海道9日纯自由行攻略</a>", 43.062096,141.354376],
["<b>留寿都</b><i>Rusutsu</i><p></p><a href='/archives/hokkido-9day-travel.html'><img src='https://pic.pinaland.cn/uploads/2024/02/02/65bc8030d5e2b.jpg' alt='滑雪'/>北海道9日纯自由行攻略</a>", 42.743908,140.895331],
["<b>登别</b><i>Noboribetsu</i><p></p><a href='/archives/hokkido-9day-travel.html'><img src='https://pic.pinaland.cn/uploads/2024/02/02/65bc8610a7e5c.jpg' alt='地狱谷'/>北海道9日纯自由行攻略</a>", 42.412772,141.106419],
["<b>大阪</b><i>Osaka</i><p></p><a href='/archives/osaka-3day-tarvel.html'><img src='https://pic.pinaland.cn/uploads/2024/09/24/66f296d12e72a.webp' alt='环球影城'/>大阪三日游:环球影城、超级任天堂世界攻略 | 秋季大阪旅行心得 </a>", 34.665442,135.432338],
["<b>喀什</b><i>Kashgar</i><p></p><a href='/archives/nanjiang.html'><img src='https://pic.pinaland.cn/uploads/2024/05/07/663a3f6db330c.webp' alt='昆仑塔'/>去看一片亿年前的海洋——南疆之旅</a>", 38.29,75.12],
["<b>塔县</b><i>Tashkurgan</i><p></p><a href='/archives/nanjiang.html'><img src='https://pic.pinaland.cn/uploads/2024/05/07/663a3e09bc49f.webp' alt='南疆'/>去看一片亿年前的海洋——南疆之旅</a>", 37.77,75.23],
];
然后同样头文件引入
<script type="text/javascript" src="<?php $this->options->themeUrl('static/footPrints.js'); ?>"></script>
同时标记点函数稍微变一下
for (let i = 0; i < points.length; i++) {
const [popupText, lat, lng] = points[i];
marker = new L.circleMarker([lat, lng], {
radius: 10,
color: '#305370',
fillOpacity: 0.35,
stroke: false,
}).bindPopup(popupText).addTo(map);
最后
总的来说leaflet服务十分简单易用,且方便嵌入博客。同时效果也不错,暂时能够满足我的使用要求。如果上面有说的不明白的,欢迎留言给我。
本文作者:HelloGakki
本文链接:https://pinaland.cn/archives/travel-map-leaflet.html
版权声明:所有文章除特别声明外均系本人自主创作,本文遵循署名 - 非商业性使用 - 禁止演绎 4.0 国际许可协议,转载请注明出处。
这玩意这么多人弄,所以我的博客必须也要弄一个玩玩_(:з」∠)_
前不久 obaby 也在搞这个,最近是刮了什么新风尚吗 哈哈
哈哈哈,不知道欸,我是早就想搞了,但是资料好少所以拖延到现在
请问下,我发现我只能使用marker标记,circle和文中的circleMarker,均不能显示。这是为什么啊。求解
你直接粘贴我的这段也不行吗?或者看下官方文档呢。我的理解是直接marker只要给到经纬度,另外两个是要给比如说半径,颜色之类的参数。
不行哎 很奇怪
我刚试了下你说的circle,也是可以的,不写参数只不过是默认的蓝色且点很小,不会说不行。
或者你可以把代码通过邮件发我,我这边试一下看 |´・ω・) ノ
感谢之前的帮助。不过最终还是选择了高德,对着文档搞好了。可以点击展示照片。
https://chrison.cn/travel.html
也不错的
赞。哪天mapsmarker用不了了(有限期的license到期,或者国外服务被墙),我也会改用leaflet。
确实不错,界面也好看。当然也羡慕你的限定license哈哈哈
感觉我的一个小工具很满足你的要求,仅适配移动端
仓库地址:https://github.com/WShihan/maphoto
demo:https://www.wsh233.cn/webapp/maphoto
看着蛮有意思的,不过这个可以设置弹出框的文本吗,不光是图片?
可以
那还蛮不错的
挺有意思。
优秀。
哈哈,很早以前就想搞了,一直没想明白怎么引到博客,后来看了你那片文章下的一个评论才恍然大悟