MapBox MapBox-GL-геокодер контейнер перекрывает результаты

голоса
0

У меня 2 стандартных MapBox MapBox-л-Geocoder контейнеры друг над другом. И когда результаты поиска из первой появляется в выпадающем списке, второй контейнер перекрывает результаты. Я попытался CSS Z-индекс 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));

введите

Задан 13/02/2020 в 21:56
источник пользователем
На других языках...                            


1 ответов

голоса
1

Это может быть исправлено путем добавления следующего 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плагин вместо того , чтобы пытаться повторно реализовать подобное решение. Как показано в этом примере , плагин позволяет легко добавить эту функцию на карту всего за несколько коротких строк кода. Есть также несколько вариантов настройки и расширения плагина, как подробно описано здесь .

Ответил 05/03/2020 в 00:52
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more