FixIt/exampleSite/content/posts/extended-shortcode-mapbox/index.zh-cn.md

title, date, author, authorLink, description, resources, tags, categories, hiddenFromHomePage, mapbox

title	date	author	authorLink	description	resources	tags	categories	hiddenFromHomePage	mapbox
扩展 Shortcode - mapbox	2022-07-20T12:22:15+08:00	Lruihao	https://lruihao.cn	mapbox shortcode 使用 Mapbox GL JS 库提供互动式地图的功能。	name src featured-image featured-image.jpg	shortcodes	documentation	true	lightStyle darkStyle mapbox://styles/mapbox/light-zh-v1?optimize=true mapbox://styles/mapbox/dark-zh-v1?optimize=true

{{< version 0.2.0 >}}

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

Mapbox GL JS 是一个 JavaScript 库，它使用 WebGL, 以 vector tiles 和 Mapbox 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 示例：

{{</* mapbox 113.953277 22.559102 11 */>}}
或者
{{</* mapbox lng=113.953277 lat=22.559102 zoom=11 */>}}

呈现的输出效果如下：

{{< mapbox 113.953277 22.559102 11 >}}

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

{{</* 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" */>}}

呈现的输出效果如下：

{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1?optimize=true" >}}