jVectorMap标签不可见，为什么？

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;。 但问题也可能是其他原因导致的。 如果你有敏锐的眼光和头脑，也许可以给我一个好的建议。 谢谢， K

- Krisztián

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

- liyi

---

2.0.1版本中，该类名为.jvectormap-tip。 - cr0ss

Answer 2

你是否在过程中误删了jquery.vector-map.css样式表？这会导致标签和缩放按钮消失。

- snb

---

谢谢您的回答！不，我有缩放按钮，它们工作得非常好。 <pre><code><link href="<?=INST_URI;?>plugins/jquery.vector-map/jquery.vector-map.css" media="screen" rel="stylesheet" type="text/css" /><script src="<?=INST_URI;?>plugins/jquery.vector-map/jquery.vector-map.js" type="text/javascript"></script> <script src="<?=INST_URI;?>plugins/jquery.vector-map/europe-en.js" type="text/javascript"></script></code></pre> - Krisztián

如果这个地图在幻灯片面板的顶部，标签可能不可见，因为它在较低的层中。如果是这样，我该怎么办？ - Krisztián

Answer 3

我曾经遇到过一个与滑块和jvectormap相结合的问题。但是，我不是改变.jvectormap-label的z-index，而是改变了.jvectormap-tip的z-index。

- Tobias