如何在jVectorMap中程序化设置区域hover状态，实现悬停中国联动台湾hover？

嘿，这个需求用jVectorMap的原生API就能完美解决，我之前做类似的地图交互时刚好试过，给你详细说下实现方式：

核心思路 #

当鼠标悬停到中国（CN）区域时，利用jVectorMap提供的setHovered()方法，主动将台湾（TW）区域设置为hover状态，这样就能同步应用你预设的hover样式（颜色、透明度、光标等）。

完整实现代码 #

把逻辑整合到地图初始化配置里，示例如下：

$('#world-map').vectorMap({
    map: 'world_mill', // 这里替换成你使用的地图类型
    // 鼠标悬停区域时触发的回调
    onRegionOver: function(event, code) {
        // 判断当前悬停的是否为中国区域
        if ('CN' === code) {
            // 获取地图的实例对象
            var mapInstance = $('#world-map .jvectormap-container').data('mapObject');
            // 主动触发台湾区域的hover状态
            mapInstance.setHovered('TW');
        }
    },
    // 可选：鼠标移出中国区域时，清除台湾区域的hover状态
    onRegionOut: function(event, code) {
        if ('CN' === code) {
            var mapInstance = $('#world-map .jvectormap-container').data('mapObject');
            // 清除所有区域的hover状态，避免状态残留
            mapInstance.clearHover();
        }
    },
    // 这里可以配置你的hover样式，比如：
    regionStyle: {
        hover: {
            fill: '#ff6347', // hover时的填充色
            opacity: 0.8, // 透明度
            cursor: 'pointer' // 光标样式
        }
    }
});

关键细节说明 #

• onRegionOver是jVectorMap的区域悬停事件，回调参数里的code就是当前区域的ISO代码；
• 通过.data('mapObject')可以获取到地图的实例对象，这是jVectorMap存储实例的标准方式；
• setHovered('TW')方法会直接让指定区域进入hover状态，自动应用你在regionStyle.hover里配置的样式；
• 加上onRegionOut事件的处理很重要，能避免鼠标离开CN区域后，TW区域还保持hover状态的问题。

内容的提问来源于stack exchange，提问作者VinZ