使用Hexo-tag-map插件，给文章插入高德百度谷歌等5类9种地图

给你的 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

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

2022-07-01 1.2.0

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

和

都可以使用

2021-08-26 1.1.8

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

2021-07-29 1.0.8 -> 1.1.1

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

特性

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

包含

[混合地图]一个混合切换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)	不支持此参数