我有 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 时
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 .
关于javascript - Mapbox mapbox-gl-geocoder 容器重叠结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60216331/