Question

我在网页上创建了一个带触发器的滑块面板。在这个面板上，我放置了jVectorMap。它工作正常（当我打开滑块面板时可以看到地图）只是国家标签不可见。谁知道为什么？

代码部分：

        $(".trigger").click(function(){
                $(".panel").toggle("fast");
                $(this).toggleClass("active");
                return false;
    });


        colors = {};
        colors['it'] = '#76ced9';
        $('#map').vectorMap({
            map: 'europe_en',
            //map: 'jquery-jvectormap-europe-en',
            onLabelShow: function(event, label, code){
                if (code == 'it') {
                    event.preventDefault();
                } else if (code == 'it') {
                    label.text('bla bla bal');
                }
            },              

            colors: colors,
            hoverOpacity: 0.7, // opacity for :hover
            hoverColor: false
        });

以下是创建面板的方法（我删除了一些部分以便您可以看到代码）：

<div class="panel" style="z-index:10;">
    <h3>Our Destinations</h3>
    <div id="map" style="width: 600px; height: 550px;"></div>

<a class="trigger" href="#">Map</a>

我在想，也许因为面板超过了html，标签可能不可见，因为它落后但我无法弄清楚在哪里放z-index：10; 但问题可能是其他问题。如果你有敏锐的眼睛和头脑，你可能会给我一个很好的建议。感谢名单， ķ

Answer 1

您可以在 jquery-jvectormap-1.2.2.css 中设置z-index=11，如下所示：

.jvectormap-label {
    position: absolute;
    display: none;
    border: solid 1px #CDCDCD;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #292929;
    color: white;
    font-family: sans-serif, Verdana;
    font-size: smaller;
    padding: 3px;
    z-index:11;
 }

Answer 2

你有没有丢失过程中的jquery.vector-map.css样式表？这会导致标签和缩放按钮消失。

Answer 3

我对滑块和jvectormap的组合遇到了同样的问题。但是，我不得不改变.jvectormap-label的z-index，而是必须更改.jvectormap-tip的z-index。

jVectorMap标签不可见，为什么？

3 个答案: