map - 特定の国にカーソルを合わせると、空白の世界地図で国旗が強調表示されます

Question

世界地図で国の強調表示にjVectormapプラグインを使用しています。今私の質問が示唆しているように、特定の国にカーソルを合わせたときに国の旗を表示したいと考えています。

全世界地図の画像マッピングはしたくありません。その解決策を投稿しないでください。それを行う時間がないため、実行可能な解決策ではないと思います。

誰かがプラグイン、svg、Google マップ、js などを使用してこの機能を実行した場合は、私を助けてください。

それでも有料のプラグインがある場合は、知りたいです。2日間探しました。しかし、私はまだそのような機能に出くわしていません。

Answer 1

onRegionLabelShow地域を使用して国旗codeの URL を作成し、label.

$(function() {
    $('#map').vectorMap({
        onRegionLabelShow: function(event, label, code)
        {
           label.html(label.html()+
           '<br><img src="'+getFlagImgSrc(code)+'" height="20">');
        }
    });

    /*
    * Constructs a URL for a country flag image on Flags Of The World 
    * using the ISO-3166 Digraph 
    */
    function getFlagImgSrc(code)
    {
       return 'http://www.fotw.us/images/'+
               code.toLowerCase().substring(0,1)+
               '/'+
               code.toLowerCase()+
               '.gif';  
    }    

});​

地域の上にマウスを置いたときに、レンダリングされたラベルが国旗とともにどのように見えるかの例: