JQVMap Hover reveal

JQVMapの国をマウスオーバーすると、国名が表示されます。コードソースはSVGファイルの名前です。 SVGファイルで名前は次のように示されている：それはJQVMap Hover reveal

if (params.showTooltip) { 
map.label.text(mapData.paths[code].name); 
jQuery(params.container).trigger(labelShowEvent, [map.label, code]);

として示されている

"path":".93z","name":"Uruguay",

そしてJQVmapのソースコードに私は下に表示されます小さなテーブルを追加されてやりたいです国の名前。私はエスケープ文字を入れて私に新しい行を与え、それを自分でアレンジしようとしましたが、それより難しくなるようになっています。 'table'という名前の別の要素を作成してソースコードで呼び出すことは可能ですか、名前要素に情報を含めるようにする必要がありますか？

出典

2017-07-26 Alec Davies

基本的には、デフォルトのラベルテキストを上書きできるハンドブックをonLabelShowハンドブックで使用するだけです。その代わりに、あなたはあなたが望むマークアップを置くことができ、それはJQVMapによってうまくレンダリングされます。

カスタムラベルの内容を参照するには、.jqvmap-labelセレクタを使用します。

$(function() { 
 
    var vMap = $('#map').vectorMap({ 
 
     map: 'world_en', 
 
     zoomOnScroll: false, 
 
     hoverOpacity: 0.7, 
 
     onLabelShow: function (event, label, code) { 
 
      var countryName = label[0].innerHTML; 
 
      var html = ['<table>', 
 
      '<tr>', 
 
       '<td>Name</td>', 
 
       '<td>Code</td>', 
 
      '</tr>', 
 
      '<tr>', 
 
       '<td>', 
 
       countryName, 
 
       '</td>', 
 
       '<td>', 
 
       code, 
 
       '</td>', 
 
      '</tr>', 
 
      '</table>' 
 
      ].join(""); 
 
      label[0].innerHTML = html; 
 
     } 
 
    }); 
 
});

.jqvmap-label table { 
 
    border: solid 1px #CDCDCD; 
 
    background: #444444; 
 
    color: white; 
 
    font-family: sans-serif, Verdana; 
 
    font-size: smaller; 
 
    padding: 3px; 
 
} 
 

 
#map { 
 
    width: 100%; 
 
    height: 500px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/jquery.vmap.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/maps/jquery.vmap.world.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/jqvmap.css" /> 
 
    </head> 
 
    <body> 
 
    <div id="map"></div> 
 
    </body> 
 
</html>

出典

2017-08-08 14:26:45 deblocker

アメージング、ありがとうございました!!私はこれについての答えを得る見通しをあきらめて、本当にありがとう、ありがとう！ –

JQVMap Hover reveal

答えて

関連する問題