使用 jqv 地图在 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 路径的 质心 的主要函数：

     //svgPathParser => browserified version of
     // https://github.com/hughsk/svg-path-parser
     var parsedPath= svgPathParser(path);

    // pathes in jqvmap are, for the most of them, in the form of [ start Point, [ curves ] ]
    // if you want better results it is possible to refine that.
    var origin= { x: parsedPath[0].x, y: parsedPath[0].y };
    var pathPartCentroids= [];
    var totalLength= 0;
    for( var i=1; i< parsedPath.length - 1; i++){

        var pathPart= parsedPath[i];

        if(pathPart.code !="c")
            break;

        //centroidOfPathPart returns the centroid of a Bezier curve. 
        var pathPartCentroid= centroidOfPathPart([ [0,0], [ pathPart.x1, pathPart.y1 ], [ pathPart.x2, pathPart.y2 ], [ pathPart.x, pathPart.y ] ]); 

        pathPartCentroid.x += origin.x;
        pathPartCentroid.y += origin.y;

        pathPartCentroid={ centroid: pathPartCentroid, distance: norm( pathPartCentroid, origin) } 
        pathPartCentroids.push(pathPartCentroid);

        totalLength+= pathPartCentroid.distance;

        origin.x+= pathPart.x;
        origin.y+= pathPart.y;
    }

    var centroid= {x:0,y:0};

    //segments are weighted by their length 
    pathPartCentroids.forEach(function( pathPart ){
        centroid.x += pathPart.centroid.x * pathPart.distance / totalLength;
        centroid.y += pathPart.centroid.y * pathPart.distance / totalLength;
    });

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