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.addControl(geocoderStart); 
map.addControl(geocoderEnd);

，两个 DOM 元素class="mapboxgl-ctrl-geocoder mapboxgl-ctrl"被添加为divwith的子元素（除非在实例化时指定了class="mapboxgl-ctrl-top-right"替代元素）。如此处插件的源代码所示，该类的是，因此通过使用上述 CSS 设置对象（DOM 元素的第一个子元素）的， 的建议下拉列表将位于。positionMapboxGeocodermapbox-gl-geocoderz-index.suggestions1000z-indexgeocoderStartmapbox-ctrl-top-right1001geocoderStartgeocoderEnd

下面是一个 JSFiddle 演示了实际解决方案：https://jsfiddle.net/njevh376/（请注意，您必须添加自己的 Mapbox 访问令牌才能查看结果）。

话虽这么说，从代码中使用的命名约定（即geocoderStart、"Starting point"、geocoderEnd和"Destination point"）来看，您似乎正在尝试实现一种将地理编码和方向与 GL JS 地图集成的方法。您可以使用该mapbox-gl-directions插件，而不是尝试重新实现类似的解决方案。如本示例所示，该插件只需几行简短的代码即可轻松将此功能添加到您的地图中。还有几个用于自定义和扩展插件的选项，详细信息请参见此处。