悬停在特定国家/地区时,在空白世界地图上突出显示国旗

Posted

技术标签:

【中文标题】悬停在特定国家/地区时,在空白世界地图上突出显示国旗【英文标题】:Highlight country flag on blank world map when hovered on specific country 【发布时间】:2012-04-20 14:30:55 【问题描述】:

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

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

如果有人使用任何插件、svg、谷歌地图、js 完成此功能,请帮助我。

如果有任何付费插件,我想知道。我已经搜索了2天。但是我还没有遇到过这样的功能。

【问题讨论】:

***.com/questions/9945265/…的可能重复 【参考方案1】:

您可以为onRegionLabelShow 提供一个函数,该函数使用区域code 构造国家标志的URL,然后自定义label

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

    /*
    * 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';  
        

);​

当您将鼠标悬停在区域上时,呈现的标签与国家标志的外观示例:

【讨论】:

请问您也可以看一下这个问题吗?***.com/questions/38672204/… 函数onRegionLabelShow在v2.0+中更名为onRegionTipShow

以上是关于悬停在特定国家/地区时,在空白世界地图上突出显示国旗的主要内容,如果未能解决你的问题,请参考以下文章

在鼠标悬停时突出显示L.divIcon或在Leaflet地图中以编程方式突出显示

Bokeh GeoMaps:在地区/国家上绘制标签

如何在鼠标悬停时突出显示图像地图的某些部分?

如何指定仅适用于特定国家/地区的地图? [复制]

使用 CSS 突出显示悬停时的图像区域

在表格中悬停单元格时突出显示特定单元格