地图全屏时不显示 select2

Question

嘿，我试图在谷歌地图上显示 select2（其后端），并且有效，但是当地图全屏时，列表不会显示。我尝试更改 z-index 值，但不起作用。有人可以帮忙吗我??

    $('document').ready(function() {
    $('#Name').select2({
        placeholder: "Choose name",
        minimumInputLength: 3,
        ajax: {
            url: 'somthing here ...',
            dataType: 'json',
            data: function (params) {
                return {
                    q: $.trim(params.term)
                };
            },
            processResults: function (data) {
                // console.log(data);
                return {
                    results: data
                };
            },
            cache: true
        }
    });
   });

Answer 1

现在你的

select2 div

位于 body 的所有 div 最后一个元素之外。

将 dropdownParent 与 google 地图类一起传递，以便

select2 div

将位于该 div 内。

检查检查元素，然后尝试使用 z-index。

 $('#Name').select2({
        placeholder: "Choose name",
        minimumInputLength: 3,
        dropdownParent: $('.map'),
        ajax: {
            url: 'somthing here ...',
            dataType: 'json',
            data: function (params) {
                return {
                    q: $.trim(params.term)
                };
            },
            processResults: function (data) {
                // console.log(data);
                return {
                    results: data
                };
            },
            cache: true
        }
    });

查看更多信息：常见问题

Answer 2

我使用了@Diip的链接。但就我而言，当地图进入全屏时，我注意到

$('.map')

没有显示。我更改为将 dropdownParent 与地图元素

gm-style

一起使用，并等待地图加载，如下所示：

    google.maps.event.addListenerOnce(map, 'idle', function () {
        // do something only the first time the map is loaded
        selectTag.select2({
            width: '100%',
            placeholder: "Select an option",
            allowClear: true,
            dropdownParent: map_container_tag.find('.gm-style'), // attach to google map when fullscreen
        });
    });

Answer 3

1：制作Div或一些Html

2：让我们在地图中使用 Div map.controls[google.maps.ControlPosition.TOP_CENTER].push(someDiv);

3：在地图内的 Div 中选择带有 dropdownParent 的 2

解决方案类似于 js 谷歌地图全屏中弹出 sweetalert2 ^_^ 当地图全屏时，如何强制 Sweet Alert 2 在 Google 地图上触发？