技術 | 如何在 Mapbox GL JS 中將地圖本地化

在 Mapbox GL JS 中使用我們最新的 Mapbox GL language 插件可以迅速本地化您的地圖。步驟十分簡單，只需安裝插件並將標籤切換到最適合您需求的語言。

具體步驟如下：

1.先打開「展示地圖（Display a map）」樣本。

2.使用 CDN 或模塊打包工具引用語言插件

3.初始化 MapboxLanguage 插件並添加到你的 Map 對象中。

<script src=https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.js></script><link href=https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.css rel=stylesheet /><script src=https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v0.9.0/mapbox-gl-language.js></script><div id=map></div><script> mapboxgl.accessToken = YOUR_ACCESS_TOKEN; var map = new mapboxgl.Map({ container: map, style: mapbox://styles/mapbox/streets-v10, center: [-77.0259, 38.9010], zoom: 9 }); var language = new MapboxLanguage(); map.addControl(language);</script>

默認情況下，語言插件會將瀏覽器配置的語言設為地圖語言。除了當地語言外，Mapbox Streets 還可添加 9 種語言。

您也可以自行設置需要的語言，設置完畢後地圖將立即更新：

map.addControl(new MapboxBrowserLanguage({ defaultLanguage: fr}));

記得在 Mapbox GL JS 中設置從右向左的文字顯示方向，否則無法正確渲染阿拉伯語腳本。

// Add right to left text support to support Arabic labelsmapboxgl.setRTLTextPlugin(https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js);

開放資源

Mapbox GL Language 是一個開源項目。有興趣來試試嗎？您還可以自行開發代碼，並和他人一起分享！

還不趕快使用 Mapbox GL language 插件來本地化你的地圖應用。如有任何疑問可微信搜索Mapbox-China關注mapbox微信公眾號，並在後台留言，我們的工程師會為您耐心解答。

推薦閱讀：