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

Posted 2021-04-29

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

答案

这可以通过添加以下CSS来解决：

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

对您的实现。通过执行

将地理编码器实例添加到地图时

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

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

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

话虽这么说，根据代码中使用的命名约定（即https://jsfiddle.net/njevh376/，geocoderStart，"Starting point"和geocoderEnd），您似乎正在尝试实现一种集成地理编码和方向的方法与您的GL JS地图。您可以使用"Destination point"插件，而不是尝试重新实现类似的解决方案。如mapbox-gl-directions所示，该插件使您只需短短几行代码就可以轻松地将此功能添加到地图中。还有一些用于自定义和扩展插件的选项，详细this example。