Mapbox contenitore mapbox-gl-geocoder sovrappone risultati

voti
0

Ho 2 contenitori mapbox mapbox-gl-geocoder standard, uno sopra l'altro. E quando i risultati della ricerca dal primo appare in discesa, il secondo contenitore si sovrappone alla risultati. Ho provato css z-index 1000 sul li, ul ecc, ma funziona nulla. Ora ho finito con

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

ma è bacato. C'è un modo semplice css per sovrapporre secondo ingresso con risultati li? Grazie

My Code

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

entrare

È pubblicato 13/02/2020 alle 21:56
fonte dall'utente
In altre lingue...                            


1 risposte

voti
1

Questo può essere risolto aggiungendo il seguente CSS:

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

per l'implementazione. Quando si aggiungono le istanze geocoder alla mappa eseguendo

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

, Due elementi DOM con class="mapboxgl-ctrl-geocoder mapboxgl-ctrl"vengono aggiunti come figli del divcon class="mapboxgl-ctrl-top-right"(a meno che un alternativo positionviene specificato quando il MapboxGeocoderistanziata). Come mostrato nel codice sorgente per il mapbox-gl-geocoderplug-in qui , l' z-indexdella .suggestionsclasse è 1000, quindi impostando l' z-indexdel geocoderStartoggetto (il primo figlio del mapbox-ctrl-top-rightelemento DOM) per 1001quanto sopra CSS, i suggerimenti dropdown del geocoderStartsiederà sulla parte superiore del geocoderEnd.

Ecco una JSFiddle dimostrando la soluzione in azione: https://jsfiddle.net/njevh376/ (nota che si dovrà aggiungere la tua accesso Mapbox token per visualizzare il risultato).

Detto questo, dalle convenzioni di denominazione in uso nel codice (vale a dire geocoderStart, "Starting point", geocoderEnd, e "Destination point"), sembra che si sta cercando di implementare un modo per integrare geocoding e le direzioni con la vostra mappa GL JS. È possibile utilizzare il mapbox-gl-directionsplug-in invece di cercare di re-implementare una soluzione simile. Come mostrato in questo esempio , il plugin rende facile aggiungere questa funzionalità alla mappa in poche brevi righe di codice. Ci sono anche diverse opzioni per la personalizzazione e l'estensione del plugin, come dettagliato qui .

Risposto il 05/03/2020 a 00:52
fonte dall'utente

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