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);

，两个带有 class="mapboxgl-ctrl-geocoder mapboxgl-ctrl" 的 DOM 元素被添加为带有 class="mapboxgl-ctrl-top-right" 的 div 的子元素（除非备用 position is specified when the MapboxGeocoder is instantiated). As shown in the source code for the mapbox-gl-geocoder plugin here，[=18 .suggestions class 的 =] 是 1000，因此通过设置 geocoderStart 对象的 z-index（mapbox-ctrl-top-right [的第一个子对象） =48=] 元素）到 1001 上面的 CSS，geocoderStart 的建议下拉列表将位于 geocoderEnd.

的顶部

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

也就是说，从代码中使用的命名约定（即 geocoderStart、"Starting point"、geocoderEnd 和 "Destination point"）看来，您正在尝试实现一种将地理编码和方向与 GL JS 地图集成的方法。您可以使用 mapbox-gl-directions 插件而不是尝试重新实现类似的解决方案。如图this example, the plugin makes it easy to add this functionality to your map in just a few short lines of code. There are also several options for customization and extension of the plugin, as detailed here.

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

Mapbox mapbox-gl-geocoder container overlaps results

javascript

css

mapbox

mapbox-gl-js