Mapbox recipiente mapbox-gl-geocodificador superpone resultados

votos
0

Tengo 2 recipientes mapbox mapbox-gl-geocodificador estándar uno sobre otro. Y cuando los resultados de la búsqueda de la primera aparece en la lista desplegable, el segundo recipiente superpone los resultados. Probé css z-index 1000 sobre li, ul etc., pero nada funciona. Ahora que terminó 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; });

pero está libre de errores. ¿Hay una manera sencilla css para superponer segunda entrada con resultados li? Gracias

Mi código

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

introducir

Publicado el 13/02/2020 a las 21:56
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
1

Esto se puede solucionar añadiendo el siguiente CSS:

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

a su puesta en práctica. Cuando se agrega los casos de codificación geográfica al mapa mediante la ejecución

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

, Dos elementos DOM con class="mapboxgl-ctrl-geocoder mapboxgl-ctrl"se añaden como hijos de la divcon class="mapboxgl-ctrl-top-right"(a menos que un suplente positionse especifica cuando el MapboxGeocoderse crea una instancia). Como se muestra en el código fuente para el mapbox-gl-geocoderplugin de aquí , el z-indexde la .suggestionsclase es 1000, por lo que mediante el establecimiento de la z-indexdel geocoderStartobjeto (el primer hijo del mapbox-ctrl-top-rightelemento DOM) a 1001la CSS anterior, las sugerencias desplegable del geocoderStartse sentará en la parte superior de la geocoderEnd.

Aquí es un jsFiddle demostrando la solución en acción: https://jsfiddle.net/njevh376/ (Tenga en cuenta que tendrá que añadir su propio acceso Mapbox contadores a ver el resultado).

Una vez dicho esto, a partir de las convenciones de nombres que se utilizan en el código (es decir geocoderStart, "Starting point", geocoderEnd, y "Destination point"), parece que usted está tratando de poner en práctica una forma de integrar la geocodificación de direcciones y con su mapa GL JS. Se podría utilizar el mapbox-gl-directionsplug-in en lugar de tratar de volver a poner en práctica una solución similar. Como se muestra en este ejemplo , el plugin hace que sea fácil de añadir esta funcionalidad a su mapa en tan sólo unas pocas líneas de código. También hay varias opciones de personalización y ampliación del plug-in, como se detalla aquí .

Respondida el 05/03/2020 a las 00:52
fuente por usuario

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