Mapbox mapbox-gl-geocoder beholder overlapper resultatene

stemmer
0

Jeg har 2 standard mapbox mapbox-gl-geocoder beholdere over hverandre. Og når søkeresultatene fra den første som vises i rullegardinlisten, legges over andre beholder resultatene. Jeg prøvde css z-index 1000 i løpet av li, ul osv, men ingenting fungerer. Nå endte jeg opp med

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

men det er buggy. Er det en enkel css måte å overlappe andre innspill med li resultater? Takk

min kode

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

skriv

Publisert på 13/02/2020 klokken 23:56
kilden bruker
På andre språk...                            


1 svar

stemmer
1

Dette kan løses ved å legge følgende CSS:

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

til implementeringen. Når du legger til Geocoder tilfeller til kartet ved å utføre

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

To DOM-elementer med class="mapboxgl-ctrl-geocoder mapboxgl-ctrl"blir tilsatt som barn av den divmed class="mapboxgl-ctrl-top-right"(med mindre en alternativ positioner angitt når det MapboxGeocoderblir instansiert). Som vist i kildekoden for mapbox-gl-geocoderplugin her , den z-indexav .suggestionsklassen er 1000, så ved å sette z-indexav geocoderStartobjektet (det første barnet av mapbox-ctrl-top-rightDOM-element) til 1001med ovennevnte CSS, forslagene rullegardinmenyen til geocoderStartskal sitte på toppen av geocoderEnd.

Her er en JSFiddle demonstrere løsningen i aksjon: https://jsfiddle.net/njevh376/ (merk at du må legge til dine egne Mapbox tilgang token å se resultatet).

Det blir sagt, fra navnekonvensjoner som brukes i koden (nemlig geocoderStart, "Starting point", geocoderEnd, og "Destination point"), det ser ut som du prøver å implementere en måte å integrere geokoding og retninger med GL JS kartet. Du kan bruke mapbox-gl-directionsplugin stedet for å prøve å re-implementere en lignende løsning. Som vist i dette eksemplet , gjør plugin det enkelt å legge denne funksjonaliteten i kartet ditt i bare noen få korte linjer med kode. Det er også flere muligheter for tilpasning og utvidelse av plugin, som beskrevet her .

Svarte 05/03/2020 kl. 02:52
kilden bruker

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