【去过】页面上线

最终效果见这里。

我这个人既不喜欢旅游，也不喜欢摄影，没出过国也没在国内溜达过几个地方，但这并不妨碍我也有一颗上线足迹地图的心。无奈谷歌地图连不上，百度地图不想连，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 URL、CSS 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】//调整缩放比

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