-1

を使用して米国の州マップを作成しまし た。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>

4

1 に答える 1

1

まず、状態コードを追加するための組み込みパラメーターが jqvmap にありません。

このラベルの適切な位置を見つけることは簡単な作業ではありません。たとえば、フロリダの形状は凸状ではなく、ミシガンには 2 つの部分があります。

stackexchange ネットワークに関するいくつかの質問:
-不規則な多角形の重心 (ラベル ポイント) を見つけるためのアルゴリズム
-複合多角形を凸多角形に分割する方法は?
-ポリゴンを凸部に分割

そこで、状態コードを状態形状の一種の重心に配置するダミーのアルゴリズムを使用してそれらを配置しようとしました。その後、必要に応じてそれらを移動し、設定した位置を使用できます。

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

このペンで位置を編集できます。
次に、その別のものを使用して、マップに州コードを追加します。

于 2015-05-01T20:26:00.480 に答える