MapBox MapBox-gl-geocoder Behälter überlappt Ergebnisse

stimmen
0

Ich habe 2 Standard MapBox MapBox-gl-Geocoder-Container übereinander. Und wenn die Suchergebnisse von der ersten erscheint in der Dropdown-Liste, der zweite Behälter die Ergebnisse überlagern. Ich habe versucht, CSS z-index 1000 über li, ul usw., aber nichts funktioniert. Nun landete ich mit

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

aber es ist fehlerhaft. Gibt es einen einfachen CSS Weg zweiten Eingang mit li Ergebnissen zu überlagern? Vielen Dank

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

Geben

Veröffentlicht am 13/02/2020 um 21:56
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

stimmen
1

Dies kann durch Hinzufügen des folgenden CSS festgelegt werden:

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

zu Ihrer Implementierung. Wenn Sie die Geocoder Instanzen der Karte hinzufügen, indem Sie die Ausführung

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

Zwei Elemente mit DOM class="mapboxgl-ctrl-geocoder mapboxgl-ctrl"zugegeben als Kinder der divmit class="mapboxgl-ctrl-top-right"(es sei denn , eine alternative positionangegeben wird , wenn das MapboxGeocoderinstanziiert wird). Wie in dem Quellcode für das gezeigte mapbox-gl-geocoderPlugin hier , die z-indexden .suggestionsist Klasse 1000, so durch die Einstellung z-indexdes geocoderStartObjekts (das erste Kind des mapbox-ctrl-top-rightDOM - Elements) zu 1001dem obigen CSS, Dropdown die Vorschläge der geocoderStartwird oben auf dem sitzen geocoderEnd.

Hier ist eine JSFiddle die Lösung in Aktion zeigt: https://jsfiddle.net/njevh376/ (beachten Sie, dass Sie Ihren eigenen MapBox Zugang hinzufügen Token müssen das Ergebnis sehen).

That being said, von den Namenskonventionen (nämlich im Code verwendet werden geocoderStart, "Starting point", geocoderEndund "Destination point"), es sieht aus wie Sie einen Weg zu implementieren versuchen , Geokodierung und Routen mit Ihrer GL JS Karte zu integrieren. Sie könnten die Verwendung mapbox-gl-directionsPlugin stattdessen eine ähnliche Lösung neu zu implementieren zu versuchen. Wie in gezeigt diesem Beispiel macht das Plugin es einfach , in nur wenigen Zeilen Code diese Funktionalität in die Karte hinzuzufügen. Darüber hinaus gibt es mehrere Optionen für die Anpassung und Erweiterung des Plug - In, wie detailliert hier .

Beantwortet am 05/03/2020 um 00:52
quelle vom benutzer

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