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

演示

点击查看Demo页面

/map/

点击查看其他地图效果
[{"url":"https://cdn.guole.fun/img/202107/hunhe1.jpg","alt":"混合地图"},{"url":"https://cdn.guole.fun/img/202107/hunhe2.jpg","alt":"混合地图"},{"url":"https://cdn.guole.fun/img/202107/hunhe3.jpg","alt":"混合地图"},{"url":"https://cdn.guole.fun/img/202107/hunhe4.jpg","alt":"混合地图"},{"url":"https://cdn.guole.fun/img/202107/hunhe5.jpg","alt":"混合地图"},{"url":"https://cdn.guole.fun/img/202107/hunhe6.jpg","alt":"混合地图"},{"url":"https://cdn.guole.fun/img/202107/hunhe7.jpg","alt":"混合地图"}]
[{"url":"https://cdn.guole.fun/img/202107/google1.jpg","alt":"谷歌地图"},{"url":"https://cdn.guole.fun/img/202107/google2.jpg","alt":"谷歌地图"},{"url":"https://cdn.guole.fun/img/202107/google3.jpg","alt":"谷歌地图"}]
[{"url":"https://cdn.guole.fun/img/202107/gaode1.jpg","alt":"高德地图"},{"url":"https://cdn.guole.fun/img/202107/gaode2.jpg","alt":"高德地图"},{"url":"https://cdn.guole.fun/img/202107/gaode3.png","alt":"高德地图"}]
[{"url":"https://cdn.guole.fun/img/202107/baidu1.jpg","alt":"百度地图"},{"url":"https://cdn.guole.fun/img/202107/baidu2.jpg","alt":"百度地图"},{"url":"https://cdn.guole.fun/img/202107/baidu3.jpg","alt":"百度地图"}]
[{"url":"https://cdn.guole.fun/img/202107/baidu1.jpg","alt":"Geoq地图"},{"url":"https://cdn.guole.fun/img/202107/baidu2.jpg","alt":"Geoq地图"},{"url":"https://cdn.guole.fun/img/202107/baidu3.jpg","alt":"Geoq地图"},{"url":"https://cdn.guole.fun/img/202107/baidu4.jpg","alt":"Geoq地图"},{"url":"https://cdn.guole.fun/img/202107/baidu5.jpg","alt":"Geoq地图"}]

openstreetMap

更新记录

点击查看更新日志v1.2.1

2023-06-24 1.2.1

  1. 优化地图容器样式，增加间距 margin: 0.8rem 0 1.6rem 0;
  2. 更换依赖包为 unpkg.com

2022-07-01 1.2.0

调整地图上供应商的名称，视觉体验更好；标签名称兼容大小写，如

和
都可以使用

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

用法

全局语法

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，均可共用一个坐标值。在高德官网，坐标拾取器页面获取即可。

高德地图坐标拾取系统

https://lbs.amap.com/tools/picker

百度地图

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

百度地图坐标拾取系统

https://api.map.baidu.com/lbsapi/getpoint/index.html

鸣谢

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

Leaflet.js

https://api.map.baidu.com/lbsapi/getpoint/index.html

Leaflet.ChineseTmsProviders

https://github.com/htoooth/Leaflet.ChineseTmsProviders

本项目仓库

https://github.com/kuole-o/hexo-tag-map

本项目 NPM 页面

https://www.npmjs.com/package/hexo-tag-map