使用jqv map在svg映射上写入状态名称

Question

我使用jqvmap创建了美国州地图 。看到 jqvmap.com

我想在地图中间写下州名，如下图所示。

我尝试过使用伪元素，但它不起作用。

这是我的代码。

jQuery(document).ready(function () {
                jQuery('#vmap').vectorMap({
                    map: 'usa_en',
                    enableZoom: false,
                    showTooltip: true,
                    backgroundColor: '#D9D9D9',
                    color: '#009F45',
                    borderColor: '#ffffff',
                    borderOpacity: 0.25,
                    borderWidth: 2,
                    hoverColor: '#999999',
                    selectedColor: '#0077aa',
                    selectedRegion: 'MO',
                    onRegionClick: function (element, code, region)
                    {
                        var message = 'You clicked "'
                                + region
                                + '" which has the code: '
                                + code.toUpperCase();
                        alert(message);
                    }

                });

            });

/*!
 * jQVMap Version 1.0 
 *
 * http://jqvmap.com
 *
 * Copyright 2012, Peter Schmalfeldt <manifestinteractive@gmail.com>
 * Licensed under the MIT license.
 *
 * Fork Me @ https://github.com/manifestinteractive/jqvmap
 */
.jqvmap-label
{
    position: absolute;
    display: none;
    -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;
}
.jqvmap-zoomin, .jqvmap-zoomout
{
    position: absolute;
    left: 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #000000;
    padding: 3px;
    color: white;
    width: 10px;
    height: 10px;
    cursor: pointer;
    line-height: 10px;
    text-align: center;
}
.jqvmap-zoomin
{
    top: 10px;
}
.jqvmap-zoomout
{
    top: 30px;
}
.jqvmap-region
{
    cursor: pointer;
}
.jqvmap-ajax_response
{
    width: 100%;
    height: 500px;
}

/*Colors of state*/

path#jqvmap1_nj{
    fill:#7AC37A;
}

path#jqvmap1_tn{
    fill:#7AC37A;
}

path#jqvmap1_in{
    fill:#7AC37A;
}

path#jqvmap1_co{
    fill:#7AC37A;
}

path#jqvmap1_ca{
    fill:#026E38;
}
path#jqvmap1_ca:after{
    content:'ca';
    position: absolute;
    top: 0;
    color:#fff;
}

path#jqvmap1_ak{
    fill:#6E6F73;
}

path#jqvmap1_tx{
    fill:#6E6F73;
}

path#jqvmap1_ar{
    fill:#6E6F73;
}

path#jqvmap1_la{
    fill:#6E6F73;
}

path#jqvmap1_al{
    fill:#6E6F73;
}

path#jqvmap1_nh{
    fill:#6E6F73;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://jqvmap.com/js/vmap/jquery.vmap.js"></script>
<script src="https://jqvmap.com/js/vmap/jquery.vmap.usa.js"></script>
<div id="vmap" style="width: 600px; height: 400px;"></div>

Answer 1

首先，jqvmap中没有内置参数来添加状态代码。

为这个标签找到一个好位置并不是一件轻而易举的事。例如，佛罗里达州的形状不是凸起的，密歇根州有两个部分。

有关stackexchange网络的一些问题：
- Algorithm for finding irrregular polygon centroid (label point)
- How to split compound polygons into convex polygons?
- Partitioning a polygon into convex parts

所以，我试图用虚拟算法放置它们，它将状态代码置于种状态形状的质心。 然后，您可以根据需要移动它们，并使用您设置的位置。

这是计算SVG路径的质心的主要函数：

    <div class=container>
      <div class="row contained">
           <div class="col">Centered!</div>
       </div>
    </div>  

div.container {
    height: 50%; }
div.contained {
    margin: 0;
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) }

您可以使用this pen编辑位置 然后使用that another one在地图中添加州代码。