Mapbox mapbox-GL-Geocoder tartály átfedésben eredményeket

szavazat
0

Van 2 standard mapbox mapbox-gl-Geocoder tartályok egymás felett. És amikor a keresési eredmények az első jelenik meg a legördülő listában, a második tartály befedi az eredményeket. Próbáltam CSS z-index az 1000 li, ul stb, de semmi sem működik. Most én végül

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

de ez hibás. Van egy egyszerű módja annak, hogy css overlay második bemenet li eredmények? Kösz

Saját kód

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

írja

A kérdést 13/02/2020 23:56
a forrás felhasználó
Más nyelveken...                            


1 válasz

szavazat
1

Ez lehet rögzíteni úgy, hogy a következő CSS:

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

a végrehajtás. Ha hozzáadja a Geocoder esetekben a térképen végrehajtó

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

, Két DOM elemeket class="mapboxgl-ctrl-geocoder mapboxgl-ctrl"adunk hozzá, mint a gyermekek, a diva class="mapboxgl-ctrl-top-right"(kivéve, ha egy másik positionhatározunk meg, amikor a MapboxGeocodervan példányosítva). Amint az a forráskódban a mapbox-gl-geocoderbővítmény itt , az z-indexaz .suggestionsosztály 1000, így beállítja a z-indexaz geocoderStartobjektum (az első gyermek a mapbox-ctrl-top-rightDOM elem), hogy 1001a fenti CSS, a javaslatokat a legördülő listából a geocoderStartfog ülni a tetején a geocoderEnd.

Itt van egy JSFiddle bizonyító megoldás akcióban: https://jsfiddle.net/njevh376/ (megjegyzés, hogy lesz hozzá saját Mapbox hozzáférési tokent az eredmény megtekintéséhez).

Ennek ellenére, a névadási szabályok használják a kódban (azaz geocoderStart, "Starting point", geocoderEndés "Destination point"), úgy néz ki, megpróbálják végrehajtani oly módon, hogy integrálja geokódolásának és irányokat az Ön GL JS térképet. Lehet használni a mapbox-gl-directionsplugint, ahelyett, hogy újra végrehajtani egy hasonló megoldás. Amint az ebben a példában , a bővítmény megkönnyíti ezt a funkciót a térkép csak néhány rövid sornyi kódot. Vannak is több testreszabási lehetőségeket és kiterjesztése a bővítmény részletezett itt .

Válaszolt 05/03/2020 02:52
a forrás felhasználó

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