给你的 Hexo 文章插入交互式地图吧!支持GoogleMap、高德地图、百度地图、Geoq地图、openstreetMap常规地图+卫星地图+卫星标注地图!一个强大的地图插件。

演示

点击查看其他地图效果

openstreetMap

更新记录

点击查看更新日志v1.1.8

2021-08-26 1.1.8

优化百度地图图层展示,卫星标注图不再单独作为复选图层

2021-07-29 1.0.8 -> 1.1.1

  1. 发布第一个正式版本
  2. 若干优化

特性

将各类交互式地图呈现到你的网站!

包含

[混合地图]一个混合切换GoogleMap、高德地图、Geoq地图,常规地图+卫星地图+卫星标注地图共7个图层的地图

[GoogleMap]一个单独的谷歌地图+谷歌卫星地图

[高德地图]一个单独的高德地图+高德卫星地图+高德卫星标注地图

[百度地图]一个单独的百度地图+百度卫星地图

[Geoq地图]一个单独的Geoq地图+5种显示风格

[openstreetMap]一个单独的openstreetMap常规地图

支持标记点提示文本

支持各个地图缩放等级配置

支持经纬度配置

支持地图容器宽高配置

支持默认展示地图类型配置

用法超级简单,Butterfly已验证

安装

在主题项目根目录下,执行以下命令安装:

1
npm i hexo-tag-map --save

用法

全局语法

1
{% + 标签值 + 经度 + 纬度 + 文本 + 缩放等级 + 宽 + 高 + 默认图层 + %}

如:

1
{% map 120.101101,30.239119, 这里是西湖灵隐寺,据说求姻缘很灵验哦!, 15, 100%, 360px, 1 %}

一些示例

1
{% map 120.101101,30.239119 %}
1
{% googleMap 120.101101,30.239119, 这里是西湖灵隐寺,据说求姻缘很灵验哦! %}
1
{% gaodeMap 120.101101,30.239119, 这里是西湖灵隐寺,据说求姻缘很灵验哦!, 16 %}
1
{% geoqMap 120.101101,30.239119, 这里是西湖灵隐寺,据说求姻缘很灵验哦!, 13, 90%, 320px, 3 %}

参数取值

表1:

地图名标签值<必填>经度(-180~180)纬度(-90~90)文本缩放等级(默认14)
混合地图map坐标经度坐标纬度文本取值3~18
谷歌地图googleMap坐标经度坐标纬度文本取值1~20
高德地图gaodeMap坐标经度坐标纬度文本取值3~18
百度地图baiduMap坐标经度坐标纬度文本取值4~18
Geoq地图geoqMap坐标经度坐标纬度文本取值1~18
openstreet地图openstreetMap坐标经度坐标纬度文本取值1~18

表2:

地图名宽(默认100%) / 高(默认360px)默认图层(默认1)
混合地图百分数或具体值(100%或360px)取值1~7
谷歌地图百分数或具体值(100%或360px)取值1~3
高德地图百分数或具体值(100%或360px)取值1~3
百度地图百分数或具体值(100%或360px)取值1~2
Geoq地图百分数或具体值(100%或360px)取值1~5
openstreet地图百分数或具体值(100%或360px)不支持此参数
  1. 参数之间,用英文逗号相隔
  2. 参数必须按上述事例顺序输入,不得为空
  3. 同一个页面,同一组经纬度值,只能插入一个相同标签值的地图(若有需要,可以将第二个地图上,经度或纬度末尾删除一两个数)
  4. 参数取值必须在上述范围内
  5. 默认图层:即地图叠加层的值,默认常规地图还是卫星地图,可按地图显示顺序取值
  6. 缩放等级,数字越大,地图比例尺越小,显示的越精细
  7. 标签值外,其他参数选填,但 每个参数的左边的参数必填
  8. 谷歌地图需要外网才能加载查看

坐标经纬度获取

坐标经纬度只分两种情况,百度地图 or 非百度地图。虽然都采用了坐标参考系统 (CRS),即 EPSG:3857,但实测百度地图还是会有偏差。因此,分开取坐标经纬度即可解决。

其他地图

包括GoogleMap、高德地图、Geoq地图、openstreetMap,均可共用一个坐标值。在高德官网,坐标拾取器页面获取即可。

百度地图

百度地图经纬度坐标值,可在百度地图坐标拾取页面获得。

鸣谢

感谢Leaflet.js及其开发者,感谢Leaflet.ChineseTmsProviders及其开发者。