普通视图

【去过】页面上线

作者 大致
2025年9月12日 09:40

最终效果见这里

我这个人既不喜欢旅游,也不喜欢摄影,没出过国也没在国内溜达过几个地方,但这并不妨碍我也有一颗上线足迹地图的心。无奈谷歌地图连不上,百度地图不想连,OSM(OpenStreetMap)既连不上也连不明白,就搁置了。
直到上周,@Dayu上线了他的地图插件,试用之后发现表现形式与期待值有差距,想在帖子下面留言发建议的时候,发现了明明同学的另一份方案。虽然主要是js实现的,只需要知道leaflet这个开源库的名字,我就知道以Wordpress的海量扩展,这回成了!

找到了一个插件和插件的插件,配置之后,算是达到了心目中的效果。
插件使用比较复杂,这里记录一下,给自己个备忘,能帮到人更好。

插件Leaflet Map的配置

插件地址:Leaflet Map
逐一说明一下后台的配置项:
Default Latitude
地图默认纬度
Default Longitude
地图默认经度
Default Zoom
地图默认缩放比
Default Height
默认高度
Default Width
默认宽度
上面五个值可以以短代码参数的形式加到leaflet-map中,如果不加则使用后台的默认参。

Fit Bounds
是否令地图随标记点的范围进行缩放。如果为true,那么地图会自动计算当前所有Marker的中心位置,以及包括所有Marker点的合适的缩放比。可以用默认值,也可以在map中单独设置。

Show Zoom Controls
是否显示缩放按钮

Scroll Wheel Zoom
是否允许滚轮缩放
这项设置之后,在地图上并不是直接用滚轮缩放,而是需要用Ctrl,感觉不便所以我自己没加。

Double Click Zoom
是否允许双击放大
注意如果不显示缩放按钮的话,放大之后就回不来了。

Default Min/Max Zoom
最小和最大放大倍数。最终的放大倍数不仅跟这个后台设定项有关,也跟使用的地图瓦片API有关。

Default Tiling Service
有两个选项,“I will provide my own map tile URL”和MapQuest。MapQuest我考察了一番,感觉太难看,没继续尝试。所以重点说第一个选项,自定义tile URL。
先解释一下什么是tile URL。本插件所依赖的地图服务,叫做Map Tile Server(地图瓦片服务)。它分成Raster、Vector和Static三种形式。本插件使用的是Raster形式,而Dayu和明明同学用的都是Vector形式。Vector的参数更加丰富,Raster配置起来更简便。

※※※Map Tile URL※※※
重中之重!!因为默认的OSM服务访问不了,所以这里必须填一个自定义的。
明明同学找的cartocdn就挺好用的。他使用的light_nolabels是不带标签的版本,换成light_all就是带标签的版本。至于他为什么用不带标签的,自己悟。

https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png
http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png

这里的{z}{x}{y}都不要动,第一个{s}是指地址里的subdomain,也就是接下来的配置项【Map Tile URL Subdomains】。
有的API是需要API Key的。这样的API都有说明文档,把Key按照人家给的例子粘贴进来即可。
cartocdn对我来说有点太素了,于是周末花了一天时间寻找能用的瓦片服务,结果惨不忍睹,汇报一下成果:
maptiler.com:要注册、被墙。
opentopomap.org:免注册、丑。
stadiamaps.com:要注册、比较流畅、免费用户限流严重
tomtom.com:要注册、慢、地图不详细
here.com:要注册、中文地名乱七八糟
geoapify.com:要注册、速度尚可、账号登录验证需要梯子,服务本身不需要。
至于为啥不找国内的地图服务,是我不想吗?本插件所支持的是Raster服务,也叫zxy服务,客户端GET的结果必须是一张PNG/JPG/WEBP图片。国产的高德和天地图我也试了,根本不是一样的格式。甚至有种说法,说国内不允许提供这种服务。
然后呢,这服务也可以自己搭建,数据和教程也都有,但总觉得这种行为像为了吃顿酱肘子先花一年时间晒酱油,没必要。
兜兜转转一圈,还是要回到cartocdn。什么功不唐捐,屁咧!

Map Tile URL Subdomains
具体填什么要看API的文档说明,像openstreetmap和cartocdn都是abcde或a,b,c,d,e。有的API前面没有前缀那就不填。

Detect Retina
是否检测高清设备。如果上面的瓦片服务中支持@2x,那么选中这项以后,如果leaflet发现使用者用的是高清屏幕,就会自动使用高清地图。窃以为意义不大。

Tile Size
一般情况下服务本身已经设好了,留空即可。

Tile Id
Access Token
用Mapbox的服务才有用。但是我的Mapbox没配明白,只有一个默认的卫星地图能用,这两项也没用上。

Zoom Offset
好像是在zoom的时候自动加减一下这个值,没理解意义。

No Wrap (tiles)
地图是否与经线对齐。(这有啥用?)

JavaScript URLCSS URL
css和js的位置,默认即可。

Default Attribution
地图做成后,右下角的一串版权信息。尊重服务商要求即可。

再往后没用上。
插件装好后,其实已经可以编辑地图了。但因为还有个插件的插件,所以怎么用放后面再说。

插件Extensions for Leaflet Map的配置

插件地址:Extensions for Leaflet Map
跟主插件正相反,这个插件的后台,大多数时间在说怎么用。

Marker Clustering–When you mouse over a cluster it shows the bounds of its markers.
聚合显示时,默认会将聚合的标记点连接起来形成一个多边形。我嫌不好看,勾掉了。

When you click a cluster we zoom to its bounds.
点击聚合点时,直接缩放到所有聚合点的范围。

增加一个leaflet map

语法和关键字很多,但能用上的不多。通常只需要地图、标记点、地形json文件。

leaflet-map
主插件的主函数,用于插入一张leaflet-map。参数就是配置页面的那些,没什么特别的。

leaflet-marker
标记一个地点。参数比较多,挑有用的说。
– lat,lng / address:用于定位标记的位置。lat是纬度,lng是经度。经纬度可以从OpenStreetMap.org上查。国产地图查到的经纬度与OSM查到的有一些偏差,注意要保持一致。而address的数据库偏差非常大,不建议。
– iconUrl:标记用图标。可以是网址,也可以是相对路径,甚至base64代码。如果不设,使用默认的蓝色pin图标。
– title:鼠标移动到标记点上时显示的提示信息。这个与点击标记后显示的内容是两码事。
– iconanchor:图标的锚点偏移。这个参数有点意思,它表示的是你图标的“尖”所在的位置。以默认图标为例,规格是19*25,“尖”在最下方,所以iconanchor就应该是宽的一半和全部的高,也就是10,25。这个参默认项是0,0。每个标记都要自己手动加,相当烦。不过也能够理解,一旦有人用的是左箭头呢?
– opacity:图标的透明度。
– 【leaflet-marker】【/leaflet-marker】之间,放置弹出的html内容。放啥都行,也可以定义css。
另外还有一些参数,我都没用上官网说明文档里都有。

leaflet-geojson
地理信息的json文件。中国的地理信息文件可以在阿里云下载,或者直接引用。建议下载后到mapshaper进行优化后上传,在本地使用。这里非常感谢明明桑,一个优化工具解决了困扰我许久的问题。
– src:地理信息源文件的路径,可以是相对路径或网址。
– color:leaflet提供的属性,边框颜色。
– weight;leaflet提供的属性,边框宽度。
– opacity:leaflet提供的属性,边框透明度。默认的3px蓝色实在是有点虎。缺点是每个marker都需要单独设置。
– fill:leaflet提供的属性,布尔型,是否填充。默认true
– fillColor:leaflet提供的属性,填充颜色,不设则默认使用color
– fillOpacity:leaflet提供的属性,填充颜色的透明度,默认0.2
想一个省一个省点亮的,就下载省级json,想像我这样一个市一个市点亮的,就下载市级json,一次勾一个边即可。话说,我一直认为用省划分习俗非常不科学,甚至用市来划分都不科学。毕竟有粤南粤北、胶东鲁西南,还有江苏十三太保这样的众所周知的文化差异。我甚至觉得应该精确到县。毕竟我们旁边就有一个散装的地级市,我认识一堆人,他们分别来自鲅鱼圈、熊岳、盖州、老边、大石桥,就没有一个称自己是营口人的。但是真正实装以后才发现,县级太困难了,我甚至都没在普兰店歇过脚,自己家都没搞定。

markerclustergroup:聚合分组方法,这是“扩展的扩展”的功能,也是安装它的主要目地。cluster是指将临近的点进行聚合,group是通过关键字对追加的点进行分组。只聚合可以用cluster,只分组可以用leaflet-optiongroup。
– feat:适配项目。可以是【leaflet-marker】中的title或者iconUrl中的一个。参数以部分匹配的方式,对title或者iconUrl形成过滤,然后在右上角形成组别。
– strings:分组过滤用的字符串,用半角逗号间隔。
– groups:分组后显示的字符串。
– position :分组显示位置
– collapsed :分组是否折叠

多说无益,直接举例

【leaflet-map fitbounds】//用fitbounds,就不用关心点的位置和缩放了
【fullscreen】//增加一个全屏按钮
【leaflet-marker lat=38.87430121 lng=121.55204380 iconUrl="/path_to/marker-blue.png" iconanchor="15,40" 】<b>辽师附中</b><i>2012 /04 /<a href="/2012/04/ancient-school-motto.html" target="_blank" rel="noopener">沙河口黑石礁尖山街</a> /街拍 </i><img src="/path_to/imag0114.jpg" alt="imag0114" />【/leaflet-marker】
【leaflet-marker lat=38.88611421 lng=121.63731716 iconUrl="/path_to/marker-blue.png" iconanchor="15,40"  opacity=0.5】<b>西岗中学</b><i>2003 /05 /<a href="/2023/06/post-truth-and-something-before-my-graduation.html" target="_blank" rel="noopener">西岗八一三环街</a> /其他 </i><img src="/path_to/vlcsnap-2023-05-21-17h15m27s675.jpg" alt="vlcsnap-2023-05-21-17h15m27s675" />【/leaflet-marker】
【leaflet-marker lat=38.88890 lng=121.70665 iconUrl="/path_to/marker-yellow.png" iconanchor="15,40"  】<b>棒棰岛</b><i>1993 /08 /中山老虎滩迎宾路 /海滩 </i>【/leaflet-marker】
【leaflet-marker lat=38.93471 lng=121.19765 iconUrl="/path_to/marker-yellow.png" iconanchor="15,40" 】<b>北海王家村</b><i>2018 /08 /旅顺北海王家村 /海滩 </i>【/leaflet-marker】
【leaflet-marker lat=38.98562089 lng=121.65895298 iconUrl="/path_to/marker-yellow.png" iconanchor="15,40"  】<b>蟹子湾</b><i>2015 /04 /<a href="/2015/04/chemical-factories-stories.html" target="_blank" rel="noopener">甘井子甘井子海茂路</a> /海滩 </i><img src="/path_to/BF59AEE251904BC4.jpg" alt="BF59AEE251904BC4" />【/leaflet-marker】
【markerclustergroup feat="iconUrl" strings="blue, yellow" groups="学校, 海滩" collapsed=true】
【leaflet-geojson src="/path_to/dalian.json" color="#FF8888" weight=2 fillOpacity=0.3】//加入大连地图
【zoomhomemap】//调整缩放比
[fullscreen ] [markerclustergroup feat=iconUrl strings=blue, yellow groups=学校, 浴场 collapsed=true ] [zoomhomemap ]

就到这。总之有现成儿的我才不会亲自动手呢。

每夫吐槽(109)

作者 大致
2025年8月29日 20:33

某夜。看漫画看得犯困,又没到直接睡过去的程度,把电子书合上放在胸口,酝酿情绪。毛孩子2号猛地跳上我胸口跟我互动。撸了几下之后,猫和我都就都睡着了。
第二天早起发现,被9斤的小猫踩了一脚之后,酱婶了:

这玩意儿叫做墨案Air6。

我这人遇到好东西一般不会夸,但遇到差东西就一定会骂。既然坏了,那就得说道说道了。墨案Air6只有一个优点,就是轻便。
剩下全是缺点。它的破系统我早就想吐槽了。买的时候是本来冲着开放系统去的,到手之后发现除了自带市场里的小猫两三只,自己找的软件80%都是装不上或者闪退,10%会在3分钟之内卡死或自动退出。电量也不太能打,连续用不到5个小时就歇菜了。
倒不会把它加到黑名单里,因为估计这牌子也坚持不了几年。

在最后尝试抢救的时候,意外发现墨案号称是杂粮生态链上的。
哟吼吼,把屎盆子扣杂粮头上我可是一点儿心理负担都没有。杂粮在我心中本就离“永不录用”一步之遥

真正在黑名单上的是创维。我姑娘早上9点出门的时候电视没关,下午4点回来,发现白屏了,断电重启都不好使的那种白屏。
自己尝试刷机无效,还是找了修家电的师傅上门。
拆机用表量了几个脚,说是板烧了,屏没事。换板550,问还修不修。
这电视修的,根本也不去给你查是板子的哪个零件坏了,也根本没有动烙铁的意思。
我自己上还真不行。首先我没法判断是板坏了,其次这板的型号我在某宝上还真没搜到。
这个价格拿捏得刚刚好。平常确实是几个月都不开,可明年还得看球,2028年还得看球,2030年还得看球……

拆!
十年前的电视,电路板分成泾渭分明的两部分,一半就是个机顶盒,另一半负责控制屏幕,两板间有几组排线。
一周后新板到货,涛声依旧了。师傅走前特意叮嘱:“这板子已经不太好找了,我跟你说啊,用创维的电视,千万别升级,就当成个显示屏用就行。反正我看你也是配了机顶盒。”
从善如流,干脆网络都不配。

公司又换名字了。这次工资卡也会同时换成浦发。
上门办工资卡的同时推销的信用卡,“开卡豪礼”可以是个小风扇或者某视频网站的VIP季卡。部门还真有人要了那个VIP季卡。
回家充会员的时候,发现这卡也太狗了:每个月可以激活VIP7天,到下个月可以再激活VIP7天,下下个月还可以激活7天,最后失效。
就问你跨了3个月是不是一季吧!

某日早上,工作机提示密码即将过期。改完密码后登邮箱,停在在二次验证的弹窗画面上,死活刷不出来。
找IT的小伙来解决。我们彼此能叫上名字,他知道我搞不定的问题一般都不太常见,一进门便神色紧张。
我说:“给你看个稀罕东西,Outlook把IE给弄出来了。Win11下的IE你见过吗?”
哥们当时就懵了。试着给我清用户清缓存,又登录网页版反复修改邮箱配置。又用他的管理员账号配置他自己的邮箱,也卡在同样的地方。
一个多小时毫无效果。
他忽然想起来:“你给我打电话之前,重启过没有?”
一阵振聋发聩的沉默。

臭宝学校的军训开始了。感觉学校根本就怕出事,千方百计地在拖延时间——每天训练,上午8:00开始,午休11:30到14:00,下午16:00回教室写当天的军训总结。
教官是从某军校找来的大二学生。
原本的计划是7天,第一天之后缩短到6天,第二天又通知要抽出半天看电影。刚才又通知,最后一天的汇报表演原定是下午3小时,改成早上2小时。
总之就是一副赶进度跳流程的样子。
这种糊弄让我觉得这学校目前看还挺务实的,没苦硬吃样子货就应该这么糊弄。

注:夫=大姨夫。

❌