无法访问 Mapbox GL JS 中的地理定位控件以更改/添加属性答案

【问题标题】：Cannot access Geolocate Control in Mapbox GL JS to change/add attributes无法访问 Mapbox GL JS 中的地理定位控件以更改/添加属性
【发布时间】：2023-03-29 22:29:01
【问题描述】：

简单问题：访问 Mapbox GL JS 中的 Geolocate 控件需要什么选择器？

您可以轻松访问所有各种地图控件以添加属性，例如标题标签、可访问性标签（aria-label 等），甚至可以启用引导工具提示和数据切换等。

但是，尽管使用了各种各样的尝试选择器，但我无法通过直接的 javascript 或 jquery 访问 Geolocate Control。它根本不响应我尝试过的任何事情。

下面是一个显示情况的jsfiddle。这是添加标题属性的简单案例。我在导航控件上成功显示它，然后在地理定位控件上失败。

这只是一些明显的选择器错误，还是我缺少的地理定位控件存在根本不同？或者这是一个错误？ https://jsfiddle.net/5413yjmr/

作品：

document.querySelector('.mapboxgl-ctrl-compass').setAttribute('title', 'Compass Control');

不起作用：

document.querySelector('.mapboxgl-ctrl-geolocate').setAttribute('title', 'Find My Current Location');

也不行：

document.querySelector('.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate').setAttribute('title', 'Find My Current Location');

我也非常疯狂地尝试各种不同的选择器，使用 jquery 来获取它们等等。

【问题讨论】：

附言。应该已经在 GeolocateControl 按钮上设置了 aria-label。
是的，但是那个标签只是写着“地理定位”，这对用户来说并不友好......我还想添加更多的属性。
请考虑在 GitHub 上提交拉取请求以将其更改为更好的内容。

标签： javascript jquery mapbox mapbox-gl-js

【解决方案1】：

GeolocateControl UI 按钮仅在浏览器支持地理定位的异步响应之后设置，因此它不会立即在 DOM 中可用。

https://github.com/mapbox/mapbox-gl-js/blob/d78b2d1cb162388fd16c4b3607cd2f27bd333a5f/src/ui/control/geolocate_control.js#L120

当 UI 准备就绪时，控件不会触发任何事件，因此您唯一的选择是每隔 100 毫秒左右通过轮询继续检查。

我建议你在 https://github.com/mapbox/mapbox-gl-js/issues 开一张票，以便在 Mapbox GL JS 中解决这个问题。

PS。我还建议你开一张关于标题属性的票，这听起来像是一个应该自动完成的好主意。

【讨论】：

谢谢 - 这是有道理的。太糟糕了，当 UI 准备好时，它们不会触发回调。我会继续打开一些 git 票证。同时，我可以轻松地修改源 JS 以硬编码我想要的属性，而不管 UI 状态如何，或者我可以编写一个轮询例程，在它可用之前一直检查。后续问题 - 您将轮询什么以确定 UI 已准备好以便可以设置属性并停止轮询？
我会继续运行该 querySelector 直到它返回 DOM 元素。请注意由于缺乏支持而从未添加过的情况。

【解决方案2】：

我刚刚遇到了类似的问题，我发现了这种访问 mapbox 导航控件样式和属性的方法。在我的例子中，我用它来改变样式，但我们也可以访问 DOM 属性：

let geoCoder = map.addControl(
                    new MapboxGeocoder({
                        accessToken: mapboxgl.accessToken,
                        countries: 'us',
                        marker: false,
                    }),
                    'top-right'
                )

                let geoCoderCtrl = geoCoder._controls[2].container
                if (geoCoderCtrl) {
                    geoCoderCtrl.style.boxShadow = 'none'
                }

【讨论】：