Контейнер mapbox mapbox-gl-geocoder перекрывает результаты - PullRequest
Новая
       5

Контейнер mapbox mapbox-gl-geocoder перекрывает результаты

0 голосов
/ 13 февраля 2020

У меня есть 2 стандартных контейнера mapbox map-gl-geocoder один над другим. И когда результаты поиска из первого появляются в выпадающем списке, второй контейнер накладывает результаты. Я пытался css z-index 1000 через li, ul et c., Но ничего не работает. Теперь я получил 

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

enter image description here

1 Ответ

1 голос
/ 05 марта 2020

Это можно исправить, добавив в вашу реализацию следующее CSS: 

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

. Когда вы добавляете экземпляры геокодера на карту, выполняя 

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

, два элемента DOM с class="mapboxgl-ctrl-geocoder mapboxgl-ctrl" добавляются как дочерние элементы div с class="mapboxgl-ctrl-top-right" (если не указано альтернативное position указывается, когда создается экземпляр MapboxGeocoder). Как показано в исходном коде для плагина mapbox-gl-geocoder здесь , z-index класса .suggestions равен 1000, поэтому, установив z-index объекта geocoderStart ( первый дочерний элемент от mapbox-ctrl-top-right элемента DOM) до 1001 с указанным выше CSS, раскрывающийся список подсказок geocoderStart будет располагаться поверх geocoderEnd.

Вот пример JSFiddle, демонстрирующий решение в действии: https://jsfiddle.net/njevh376/ (обратите внимание, что вам придется добавить свой собственный токен доступа Mapbox, чтобы просмотреть результат).

При этом, исходя из соглашений об именах, используемых в ваш код (а именно geocoderStart, "Starting point", geocoderEnd и "Destination point"), похоже, вы пытаетесь реализовать способ интеграции геокодирования и направлений с вашей картой GL JS. Вы можете использовать плагин mapbox-gl-directions вместо того, чтобы пытаться повторно реализовать подобное решение. Как показано в в этом примере , плагин позволяет легко добавить эту функцию к вашей карте всего за несколько коротких строк кода. Есть также несколько опций для настройки и расширения плагина, как подробно здесь .

...