当悬停在特定国家/地区时，在空白的世界地图上突出显示国家/地区标志 [英] Highlight country flag on blank world map when hovered on specific country

问题描述

我正在使用 jVectormap 插件在世界地图上突出显示国家.现在，正如我的问题所暗示的，当特定国家/地区悬停在某个国家/地区时，我想显示该国家/地区的国旗.

I'm using jVectormap plugin for country highlighting on world map. Now As my question suggests i want to show country's flag when specific country is hovered over.

我不想对整个世界地图进行图像映射.所以不要发布该解决方案，因为我没有足够的时间这样做，因此我认为这不是可行的解决方案.

I don't want to do image mapping for whole world map. so don't post that solution, i don't think its a feasible solution as i don't have such time to do that.

如果有人使用任何插件，svg，谷歌地图，js等工具完成了此功能，请帮帮我.

if anybody has done this functionality using any plugin, svg, google maps, js anything please help me out.

即使有付费插件，我也想知道.我搜索了2天.但是我还没有遇到过这样的功能.

If any paid plugin is there even then i would like to know. I have searched for 2 days. But i haven't come across such functionality yet.

推荐答案

您可以为 onRegionLabelShow ，它使用区域code来构造国家/地区标志的URL，然后自定义label.

You can provide a function for onRegionLabelShow that uses the region code to construct a URL for the country flag and then customize the 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';  
    }    

});​

将鼠标悬停在某个区域上时呈现的标签带有国家标志的外观的示例:

An example of how the rendered label looks with the country flag when you mouse over a region:

这篇关于当悬停在特定国家/地区时，在空白的世界地图上突出显示国家/地区标志的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！