扩展 Shortcode - mapbox

FixIt 0.2.0 | 新增

mapbox shortcode 使用 Mapbox GL JS 库提供互动式地图的功能.

Mapbox GL JS 是一个 JavaScript 库,它使用 WebGL, 以 vector tilesMapbox styles 为来源,将它们渲染成互动式地图。

mapbox shortcode 有以下命名参数来使用 Mapbox GL JS:

  • lng [必需]第一个位置参数)

    地图初始中心点的经度,以度为单位。

  • lat [必需]第二个位置参数)

    地图初始中心点的纬度,以度为单位。

  • zoom [可选]第三个位置参数)

    地图的初始缩放级别,默认值是 10

  • marked [可选]第四个位置参数)

    是否在地图的初始中心点添加图钉,默认值是 true

  • light-style [可选]第五个位置参数)

    浅色主题的地图样式,默认值是 前置参数 或者 网站配置 中设置的值。

  • dark-style [可选]第六个位置参数)

    深色主题的地图样式,默认值是 前置参数 或者 网站配置 中设置的值。

  • navigation [可选]

    是否添加 NavigationControl, 默认值是 前置参数 或者 网站配置 中设置的值。

  • geolocate [可选]

    是否添加 GeolocateControl, 默认值是 前置参数 或者 网站配置 中设置的值。

  • scale [可选]

    是否添加 ScaleControl, 默认值是 前置参数 或者 网站配置 中设置的值。

  • fullscreen [可选]

    是否添加 FullscreenControl, 默认值是 前置参数 或者 网站配置 中设置的值。

  • width [可选]

    地图的宽度,默认值是 100%

  • height [可选]

    地图的高度,默认值是 20rem

一个简单的 mapbox 示例:

1
2
3
{{< mapbox 113.953277 22.559102 11 >}}
或者
{{< mapbox lng=113.953277 lat=22.559102 zoom=11 >}}

呈现的输出效果如下:

一个带有自定义样式的 mapbox 示例:

1
2
3
{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1" >}}
或者
{{< mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/streets-zh-v1" >}}

呈现的输出效果如下: