简介
@mapbox/mapbox-gl-language 是一个基于 Mapbox GL JS 的插件，它允许开发者在地图上使用不同的语言和地方语言集（locale）。
在简单的Mapbox GL JS地图上，这个插件无非是更改地图标签和其他文本的语言。但是，在应用程序的更大地理语境下，他的细节是不同的。选择正确的语言时有各种的问题要考虑，包括身份验证和 API 访问。
除此之外还有需要特别提到的是：插件检测浏览器语言首选项，如果您在应用程序中刻意选择title="es"这样的元素，则插件将被设置为为先前选择的值，而不是自动检测到的值。
安装
使用 npm 安装 Mapbox GL 和 Mapbox GL 语言插件:
npm install mapbox-gl @mapbox/mapbox-gl-language
然后在您的代码中引入它们:
-- -------------------- ---- ------- ------ -------- ---- ------------ ------ -------------- ---- ----------------------------- -------------------- - -------------------- ----- --- - --- -------------- ---------- ------ ------ ------------------------------------- ------- ----------- --------- ----- -- --- ------------------ ---------------- ---------------- --------- ----
在上面的代码中，我们首先导入 mapboxgl 和 @mapbox/mapbox-gl-language。然后，我们为Mapbox GL地图指定了一些选项，包括地图的容器位置、风格、中心点和缩放等级。最后，我们向地图添加了一个Mapbox Language控件并指定了它的默认语言为中文。
API
MapboxLanguage
MapboxLanguage 是一个 Mapbox GL JS 的控制器，可以让用户切换地图上的语言。以下是常见的选项：
- defaultLanguage (
string): 控件的默认语言，通常为en（英语）或zh-Hans（简体中文），默认值en。 - supportedLanguages (
Array<string>): 控制器支持的语言数组，例如['en', 'zh', 'fr']。默认值['en', 'es', 'fr', 'de', 'it', 'pt', 'ru', 'zh', 'zh-Hans', 'zh-Hant', 'ja', 'ko', 'uk', 'no', 'nb', 'nn', 'da', 'sv', 'fi', 'nl']。
Methods
setLanguage(language: string): void
该方法让用户更改语言，请传入所需语言的字符串代码。
const languageSelector = document.querySelector('#language-selector');
languageSelector.addEventListener('change', () => {
const language = languageSelector.value;
mapboxLanguage.setLanguage(language);
});示例代码
这个示例使用了添加一个下拉控件来更改语言并使用事件监听器来调用 setLanguage 方法以在地图上切换语言。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------- -- ----------------
----- --------------- ---------------------------------------------------------- --
------- -----------------------------------------------------------------------
----- --------------------------------------------------------------- ---------------- --
------- -------------------------------------------------------------------------------------------------------
-------
---- - ------- -- -------- -- -
---- - --------- --------- ---- -- ------- -- ------ ----- -
--------
-------
------
---- ---------------
---- -----------------------
--------
------- ---------------------------
------- -----------------------------
------- ----------------------------
---------
------
--------
-------------------- - --------------------
----- --- - --- --------------
---------- ------
------ -------------------------------------
------- ----------- ---------
----- --
---
----- -------------- - --- ----------------
---------------- ----
---
-------------------------------
----- ---------------- - ---------------------------------------------
------------------------------------------- -- -- -
----- -------- - -----------------------
-------------------------------------
---
---------
-------
-------这个例子演示了如何使用 @mapbox/mapbox-gl-language 包在地图上添加语言控制，使用户可以在应用程序中更改地图的语言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006735c890c4f7277583fec