MapBox contenant MapBox-gl-géocodage chevauche les résultats

Question

MapBox contenant MapBox-gl-géocodage chevauche les résultats

voix

0

J'ai 2 conteneurs standard MapBox MapBox-gl-géocodeur un sur l'autre. Et lorsque les résultats de la recherche de la première apparaît dans la liste déroulante, le second conteneur se superpose les résultats. J'ai essayé z-index css 1000 sur li, ul, etc., mais rien ne fonctionne. Maintenant, je me suis retrouvé avec

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

mais il est buggy. Est-il un moyen simple de css superposer deuxième entrée avec des résultats li? Merci

code de mon

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

javascript css mapbox mapbox-gl-js

Créé 13/02/2020 à 21:56
source utilisateur SERG

Dans d'autres langues...

1 réponses

Adriana Babakanian · Answer 1 · 2020-03-05 00:52

Cela peut être corrigé en ajoutant le CSS suivant:

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

à votre mise en œuvre. Lorsque vous ajoutez les instances de géocodeur à la carte en exécutant

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

, Deux éléments DOM avec class="mapboxgl-ctrl-geocoder mapboxgl-ctrl"sont ajoutés en tant que fils de la divavec class="mapboxgl-ctrl-top-right"(sauf si un suppléant positionest spécifié lors de l' MapboxGeocoderinstanciation). Comme le montre le code source pour le mapbox-gl-geocoderplug - in ici , la z-indexde la .suggestionsclasse est 1000, donc en réglant le z-indexde l' geocoderStartobjet (le premier enfant de l' mapbox-ctrl-top-rightélément DOM) pour 1001le CSS ci - dessus, les suggestions déroulant de la geocoderStartsiégera au - dessus de la geocoderEnd.

Voici une démonstration jsFiddle la solution en action: https://jsfiddle.net/njevh376/ (notez que vous devrez ajouter votre propre pour afficher le résultat de jeton d' accès MapBox).

Cela étant dit, des conventions de nommage utilisées dans votre code ( à savoir geocoderStart, "Starting point", geocoderEndet "Destination point"), il semble que vous essayez de mettre en œuvre un moyen d'intégrer géocodage et directions avec votre carte GL JS. Vous pouvez utiliser le mapbox-gl-directionsplug - in au lieu d'essayer de re-mettre en œuvre une solution similaire. Comme le montre cet exemple , le plug - in, il est facile d'ajouter cette fonctionnalité à votre carte en quelques courtes lignes de code. Il y a aussi plusieurs options de personnalisation et d' extension du plug - in, comme indiqué ici .