Mapbox mapbox-GL-geocoder pojemnik pokrywa wyników

głosy
0

Mam 2 standardowe kontenery mapbox mapbox-GL-geocoder jeden nad drugim. A kiedy wyniki wyszukiwania z pierwszych pojawia się na liście rozwijanej, drugi pojemnik nakłada wyniki. Próbowałem css z-index 1000 nad li, ul etc., ale działa nic. Teraz skończyło się

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

ale jest wadliwy. Czy istnieje prosty sposób na nakładanie css drugie wejście z wynikiem li? Dzięki

Mój kod

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

wprowadzić

Utwórz 13/02/2020 o 21:56
źródło użytkownik
W innych językach...                            


1 odpowiedzi

głosy
1

To może być ustalona przez dodanie następującego CSS:

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

do realizacji. Podczas dodawania instancje geocoder na mapie wykonując

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

Dwa elementy DOM z class="mapboxgl-ctrl-geocoder mapboxgl-ctrl"dodaje się jako dzieci divz class="mapboxgl-ctrl-top-right"(chyba alternatywnym positionjest określona, gdy MapboxGeocoderjest tworzony). Jak pokazano w kodzie źródłowym dla mapbox-gl-geocoderpluginu tutaj , z-indexz .suggestionsklasy jest 1000, tak ustawiając z-indexna geocoderStartobiekcie (pierwszym dzieckiem mapbox-ctrl-top-rightelementu DOM), aby 1001z powyższym CSS, sugestie rozwijanej z geocoderStartzasiądzie na szczycie geocoderEnd,

Oto JSFiddle demonstrując rozwiązanie w akcji: https://jsfiddle.net/njevh376/ (zauważ, że trzeba będzie dodać własny dostęp Mapbox Reklamowe, aby zobaczyć wynik).

W takiej sytuacji, przed użyciem konwencje nazewnictwa w kodzie (mianowicie geocoderStart, "Starting point", geocoderEnd, i "Destination point"), to wygląda na to, że starają się realizować sposób integracji geokodowanie i kierunki z mapy GL JS. Można użyć mapbox-gl-directionswtyczki zamiast próbować ponownie wdrożyć podobne rozwiązanie. Jak pokazano w tym przykładzie , wtyczka ułatwia dodać tę funkcjonalność do mapy w ciągu zaledwie kilku linii kodu. Istnieje również kilka opcji personalizacji i rozszerzania wtyczki, jak opisano tutaj .

Odpowiedział 05/03/2020 o 00:52
źródło użytkownik

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