当在特定国家盘旋时突出显示在空白的世界地图的国旗

Question

我正在使用jVectormap插件在世界地图上进行国家/地区突出显示.现在正如我的问题所示,我希望在特定国家徘徊时显示国家的旗帜.

我不想为整个世界地图做图像映射.所以不要发布那个解决方案,我不认为这是一个可行的解决方案,因为我没有时间这样做.

如果有人使用任何插件,svg,谷歌地图,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';  
    }    

});?

将鼠标悬停在某个区域上时,渲染标签如何与国家标志一起显示的示例: