Question

我想为JVectorMap插件设置单独的区域和悬停颜色，并将没有数据的区域保留为默认的白色。

到目前为止，我已经删除了比例数据并将其替换为颜色代码（如下面的代码所示）。这很棒，但我不知道如何添加悬停数据。

如果可能的话，我还想为document.body.style.cursor添加数据，以便我可以关闭各个区域（例如，阻止实体进行交易），以便它似乎不是一个活跃的链接。

您还会注意到我已经有代码在那里打开一个面板。它用于显示一个完整的弹出式div，其中包含我拥有数据的每个区域的个性化内容。它是继承的代码，所以说实话我不确定它是如何工作的。

如果我忘了什么，请告诉我。

jQuery.noConflict();
jQuery(function(){
    var $ = jQuery;   
    $('#map_custom').vectorMap({
        map: 'world_mill_en',   
        backgroundColor : "#b8b8b8",
        regionStyle : {
            initial : {
                fill : "white",
                "fill-opacity" : 1,
                stroke : "none",
                "stroke-width" : 0,
                "stroke-opacity" : 1
            },
            hover : {
                "fill-opacity": 0.7,
            },
            selectedHover : {}
        },
        onRegionOver: function (event, code, region) {
            document.body.style.cursor = "pointer";
        },
        onRegionOut: function (element, code, region) {
            document.body.style.cursor = "default";

        },  
        onRegionClick: function(event, code, region){   
            if (code == "CA") {window.location = 'CalRamic-distributors-Canada.html'}
                if (code == "US") {window.location = 'CalRamic-distributors-USA.html'}
                    if (code == "IE") {
                        $(".panel").hide("fast");
                        $("#ireland").show("slow");   
                        document.getElementById('test_data').innerHTML=code;
                    }
                    if (code == "GB") {
                        $(".panel").hide("fast");
                        $("#unitedkingdom").show("slow");     
                        document.getElementById('test_data').innerHTML=code;
                    }
                    if (code == "ES") {
                        $(".panel").hide("fast");
                        $("#spain").show("slow");     
                        document.getElementById('test_data').innerHTML=code;
                    }
                    if (code == "PT") {
                        $(".panel").hide("fast");
                        $("#portugal").show("slow");      
                        document.getElementById('test_data').innerHTML=code;
                    }
                    if (code == "IL") {
                        $(".panel").hide("fast");
                        $("#israel").show("slow");    
                        document.getElementById('test_data').innerHTML=code;
                    }   
        // I've got a LOT more countries in my code, but you don't need all of them
        else if (code){
            event.preventDefault();     
        }
    },      
    series: {
        regions: [{
            values: sample_data
        }]
    }
});

  /* Close the Panel */
        $("body").click(function(e) {       
            if (e.target.id == "close" || $(e.target).parents("#close").size()) 
            {               
                 $(".panel").hide("slow");
            }
        });

})

目前，此代码从sample_data.js文件中提取颜色数据，格式如下：

    var sample_data = {
      "CA": '#0071a4',
      "US": '#0071a4',
      "IE": '#0071a4',
      "GB": '#0071a4',
      "ES": '#0071a4',
    }

由于这里的社区，我已经为新手做了很多，但我被要求使用jvectormap比以前更进一步。遗憾的是，我只对这个编程代码很危险，所以我要联系专家。

Answer 1

首先，它只是一个建议，你应该摆脱疯狂的if逻辑，并使它成为一个通用的函数。

例如：

function panelHandler(element, hideSpeed, showSpeed){
  $('.panel').hide(hideSpeed);
  $(element).show(showSpeed);
  $('#test_data').innerHTML('code');
}

if (code == "IE") {
    panelHandler("#unitedKingdom", "slow", "fast");
}

if (code == "GB") {
   panelHandler("#spain", "slow", "fast");
}

etc...

至于你的问题，只需附上你想要的课程设置。然后在事件上检查它，并执行它：

$('#selector').css('cursor', 'pointer');

希望这会有所帮助。如果您需要更详细的信息，请告诉我，我可以提供帮助。

Jvectormap - 为每个区域设置悬停颜色？

1 个答案: