如何在 mapbox-gl-js 中的导航控件上显示工具提示？

Question

我正在为非常缺乏经验的用户构建一个 mapbox-gl-js 应用程序，并希望提供尽可能多的指导。用于放大/缩小/地理定位等的标准图标按钮很棒，但作为额外的帮助，我想在鼠标悬停时显示一个工具提示，其中包含按钮功能的文本描述 "Zoom In"、"Zoom Out" , "Zoom to current location" 等等

我查看了 API 文档并查看了 github 中的源代码，但看不到提供此自定义的选项。如果其他人成功地做到了这一点，或者对如何在不分叉 mapbox 的情况下实现这一点有一些建议，我将非常感激！

Answer 1

最好的解决方案是使用 options.locale API https://docs.mapbox.com/mapbox-gl-js/api/map/

用于 UI 字符串（例如控件工具提示）的默认本地化 table 的补丁。 locale 对象将命名空间 UI 字符串 ID 映射到目标语言中的已翻译字符串；有关所有支持的字符串 ID 的示例，请参阅 src/ui/default_locale.js。该对象可以指定所有 UI 字符串（从而添加对新翻译的支持）或仅指定字符串的子集（从而修补默认翻译 table）。

在default_locale.js中可以找到所有默认工具提示

const defaultLocale = {
    'AttributionControl.ToggleAttribution': 'Toggle attribution',
    'AttributionControl.MapFeedback': 'Map feedback',
    'FullscreenControl.Enter': 'Enter fullscreen',
    'FullscreenControl.Exit': 'Exit fullscreen',
    'GeolocateControl.FindMyLocation': 'Find my location',
    'GeolocateControl.LocationNotAvailable': 'Location not available',
    'LogoControl.Title': 'Mapbox logo',
    'NavigationControl.ResetBearing': 'Reset bearing to north',
    'NavigationControl.ZoomIn': 'Zoom in',
    'NavigationControl.ZoomOut': 'Zoom out',
    'ScaleControl.Feet': 'ft',
    'ScaleControl.Meters': 'm',
    'ScaleControl.Kilometers': 'km',
    'ScaleControl.Miles': 'mi',
    'ScaleControl.NauticalMiles': 'nm'

};

此外，某些控制元素（例如全屏按钮）具有内部状态，基于此状态，UI 具有不同的工具提示内容，这意味着您无法覆盖这些元素的工具提示值

如何在 mapbox-gl-js 中的导航控件上显示工具提示？

How to display a tooltip on the navigation controls in mapbox-gl-js?

mapbox-gl-js