javascript - Mapbox mapbox-gl-geocoder 容器重叠结果

Question

我有 2 个标准的 mapbox mapbox-gl-geocoder 容器。当第一个容器的搜索结果出现在下拉列表中时，第二个容器会覆盖结果。我在 li、ul 等上尝试了 css z-index 1000，但没有任何效果。现在我最终得到了

geocoderStart.on('results', function(ev) {
            document.getElementById('geocoderEnd').style.visibility = "hidden";
        });
        geocoderStart._inputEl.addEventListener('input', function (e) { document.getElementById('geocoderEnd').style.visibility = "hidden"; });
        geocoderStart._inputEl.addEventListener('blur', function (e) { document.getElementById('geocoderEnd').style.visibility = "visible"; });

但它有问题。有没有一种简单的 css 方法可以用 li 结果覆盖第二个输入？谢谢

我的代码

const geocoderStart = new MapboxGeocoder({
            accessToken: mapboxgl.accessToken,
            mapboxgl: mapboxgl,
            countries: 'us',
            marker : false,
            flyTo : false,
            placeholder : "Starting point",
        });
        const geocoderEnd = new MapboxGeocoder({
            accessToken: mapboxgl.accessToken,
            mapboxgl: mapboxgl,
            countries: 'us',
            marker : false,
            flyTo : false,
            placeholder : "Destination point",
        });

        document.getElementById('geocoderEnd').appendChild(geocoderEnd.onAdd(map));
        document.getElementById('geocoderStart').appendChild(geocoderStart.onAdd(map));

Answer 1

可以通过添加以下 CSS 来修复此问题:

.mapboxgl-ctrl-geocoder:first-child {
  z-index: 1001;
}

到您的实现。当您通过执行将地理编码器实例添加到 map 时

map.addControl(geocoderStart); 
map.addControl(geocoderEnd);

，两个带有 class="mapboxgl-ctrl-geocoder mapboxgl-ctrl" 的 DOM 元素被添加为带有 class="mapboxgl- 的 div 的子元素ctrl-top-right"(除非在实例化 MapboxGeocoder 时指定了备用 position)。如mapbox-gl-geocoder插件源代码here所示，.suggestions 类的 z-index 为 1000，因此通过设置使用上述 CSS 将 geocoderStart 对象(mapbox-ctrl-top-right DOM 元素的第一个子元素)设置为 1001，建议下拉列表为geocoderStart 将位于 geocoderEnd 之上。

这是一个 JSFiddle，演示了实际的解决方案: https://jsfiddle.net/njevh376/ (请注意，您必须添加自己的 Mapbox 访问 token 才能查看结果)。

话虽如此，根据代码中使用的命名约定(即 geocoderStart、"Starting point"、geocoderEnd 和 “目的地点”)，看起来您正在尝试实现一种将地理编码和方向与 GL JS map 集成的方法。您可以使用 mapbox-gl-directions 插件，而不是尝试重新实现类似的解决方案。如图this example ，该插件只需几行简短的代码即可轻松将此功能添加到您的 map 中。还有几个用于插件定制和扩展的选项，详见here .