Mapbox 分离地理编码器两个自动完成输入 css 输出视觉交叉问题

Question

我有 mapbox 单独的地理编码器两个自动完成输入和输出 CSS 视觉交叉问题 - 当我输入一些东西时，class .suggestions-wrapper 在第二个输入下面（input.mapboxgl-ctrl-geocoder--input) 有什么方法可以让它正常工作吗？

<html>
<head>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.css">
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.min.js"></script> 

<script>
$( document ).ready(function() {
    mapboxgl.accessToken = 'pk.eyJ1IjoidmltcGlsIiwiYSI6ImNrMjhvNXU0MTIyZGszbG16dWw1enVlamwifQ.5DWWvMDwGn1VfUD9uJjBEg';

            var map = new mapboxgl.Map({
                container: 'map_home_page',
                style: 'mapbox://styles/mapbox/streets-v11',
                center: [-79.4512, 43.6568],
                zoom: 13
            });
             
            window.pick_up_forntinput = new MapboxGeocoder({
                accessToken: mapboxgl.accessToken,
                mapboxgl: mapboxgl,
                placeholder:'Pick Up Location',
                countries: 'gb',
            });
            
            document.getElementById('pick_up_forntinput').appendChild(pick_up_forntinput.onAdd(map));

            window.dropp_off_forntinput = new MapboxGeocoder({
                accessToken: mapboxgl.accessToken,
                mapboxgl: mapboxgl,
                placeholder:'Dropp Off Location',
                countries: 'gb',
            });
             
            document.getElementById('dropp_off_forntinput').appendChild(dropp_off_forntinput.onAdd(map));
            });
</script>
<body>
  

<div id="pick_up_forntinput" class="geocoder"></div>
<div id="dropp_off_forntinput" class="geocoder"></div>
           <div id="map_home_page"></div>
                      </body>
                      </html>

Answer 1

目前有两种方法可以解决这个问题：

1) 更改第一个字段的 CSS 样式，使带有所有地址的 .suggestions class 位于第二个字段下方；

 #pick_up_forntinput ul.suggestions {
    top: 60px;
    position: absolute;
}

2) 制作第二个字段的脚本，这样它就会消失。建议 class 出现

$(document).ready(function() {
  mapboxgl.accessToken = 'pk.eyJ1IjoidmltcGlsIiwiYSI6ImNrMjhvNXU0MTIyZGszbG16dWw1enVlamwifQ.5DWWvMDwGn1VfUD9uJjBEg';

  var map = new mapboxgl.Map({
    container: 'map_home_page',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-79.4512, 43.6568],
    zoom: 13
  });

  window.pick_up_forntinput = new MapboxGeocoder({
    accessToken: mapboxgl.accessToken,
    mapboxgl: mapboxgl,
    placeholder: 'Pick Up Location',
    countries: 'gb',
  });

  document.getElementById('pick_up_forntinput').appendChild(pick_up_forntinput.onAdd(map));

  window.dropp_off_forntinput = new MapboxGeocoder({
    accessToken: mapboxgl.accessToken,
    mapboxgl: mapboxgl,
    placeholder: 'Dropp Off Location',
    countries: 'gb',
  });

  document.getElementById('dropp_off_forntinput').appendChild(dropp_off_forntinput.onAdd(map));
});

$(document).on('input', '#pick_up_forntinput', function() {

  setTimeout(function() {

    if ($('#pick_up_forntinput .mapboxgl-ctrl-geocoder .suggestions').is(':visible')) {
      $('div#dropp_off_forntinput').hide("slow");
    } else {
      $('div#dropp_off_forntinput').show("slow");

    }

  }, 300);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.css">
</head>

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.min.js"></script> 

<script>

</script>
<body>
  

<div id="pick_up_forntinput" class="geocoder"></div>
<div id="dropp_off_forntinput" class="geocoder"></div>
           <div id="map_home_page"></div>
                      </body>
                      </html>

Mapbox 分离地理编码器两个自动完成输入 css 输出视觉交叉问题

Mapbox separate geocoder two autocomplete inputs css output visual crossing problem

mapbox