0

I have been trying to findout how to change the cursor to the hand for specific regions and show the label for only those regions.

I have this but am at a loss of how to do this. Can someone please help?

$(function(){
    var RColor = '#007cc4'
    var activeRegions = [
        "al", "an", "ey", "gh", "ic", "ke", "mu", "mz", "na", "ni", "za", "tz", "tu", "ug"
    ];
      $('#africa-map').vectorMap({
          map: 'africa',
          backgroundColor: 'transparent',
          zoomOnScroll: false,
          zoomButtons : false,
          regionStyle: {                  
              initial: {
                fill: '#b7bdc3',
                scaleColors: ['#b7bdc3', '#a2aaad'],
                "fill-opacity": 1,
                stroke: '#a2aaad',
                "stroke-width": 2,
                "stroke-opacity": 1
              },
              hover: {
                "fill-opacity": 0.8
              },
              selected: {
                fill: '#a2aaad'
              },
              selectedHover: {
                fill: '#a2aaad'
              }
            },
            series: {
                regions: [{values: {
                    "al" : RColor,
                    "an" : RColor,
                    "ey" : RColor,
                    "gh" : RColor,
                    "ic" : RColor,
                    "ke" : RColor,
                    "mu" : RColor,
                    "mz" : RColor,
                    "na" : RColor,
                    "ni" : RColor,
                    "za" : RColor,
                    "tz" : RColor,
                    "tu" : RColor,
                    "ug" : RColor
                    },
                    attribute: 'fill'
                    }]
                },               
              onRegionClick: function(event, code)
              {
                if (code == "al") {window.location = '$AC:MENUURL:2918$'}
                if (code == "an") {window.location = '$AC:MENUURL:2922$'}
                if (code == "ey") {window.location = '$AC:MENUURL:2919$'}
                if (code == "gh") {window.location = '$AC:MENUURL:2937$'}
                if (code == "ic") {window.location = '$AC:MENUURL:2918$'}
                if (code == "ke") {window.location = '$AC:MENUURL:2923$'}
                if (code == "mu") {window.location = '$AC:MENUURL:2924$'}
                if (code == "mz") {window.location = '$AC:MENUURL:2925$'}
                if (code == "na") {window.location = '$AC:MENUURL:2926$'}
                if (code == "ni") {window.location = '$AC:MENUURL:2927$'}
                if (code == "tz") {window.location = '$AC:MENUURL:2929$'}
                if (code == "tu") {window.location = '$AC:MENUURL:2930$'}
                if (code == "ug") {window.location = '$AC:MENUURL:2931$'}
                if (code == "za") {window.location = '$AC:MENUURL:2928$'}
              },
              onRegionOver: function(event, code)
              {                                         
                var mouseX;
                var mouseY;
                $('path.jvectormap-region.jvectormap-element').mousemove( function(e) {                    
                   var offset = $('#africa-map').offset();                     
                   mouseX = e.pageX- (offset.top)+20; 
                   mouseY = e.pageY- (offset.top)-25;
                   $(".region-info-box."+code).css({'top':mouseY,'left':mouseX});
                });  
                $(".region-info-box").hide();
                $(".region-info-box."+code).css({'top':mouseY,'left':mouseX}).fadeIn('fast');
              }
        });
    });

There is a onRegionOver but am at a loss to get it show the hand cursor and labels for only the regions listed above.

Here is a jsfiddle for this http://jsfiddle.net/a9Xj6/2/ enter link description here

4

2 回答 2

3

实际上，您可以利用onRegionOver事件以及onRegionLabelShow标签操作。在回调中返回false将停止函数的执行，在这种情况下，我们可以在悬停区域时停止执行标签渲染。

要将光标更改为 a hand，您可以使用 javascript 来完成。

document.body.style.cursor = 'pointer';

一些示例代码可以进一步帮助您：

var regionResults = {
    "AL" : RColor,
    "AN" : RColor,
    "EY" : RColor,
    "GH" : RColor,
    "IC" : RColor,
    "KE" : RColor,
    "MU" : RColor,
    "MZ" : RColor,
    "NA" : RColor,
    "NI" : RColor,
    "ZA" : RColor,
    "TZ" : RColor,
    "TU" : RColor,
    "UG" : RColor
};

new jvm.WorldMap({
    // your map settings
    series: {
        regions: [{
            values: regionResults,
            attribute: 'fill'
        }]
    },
    onRegionOver: function(e, code) {
        if (regionResults.hasOwnProperty(code)) {
            // the hovered region is part of the regionResults, show hand cursor
            document.body.style.cursor = 'pointer';
        }
    },
    onRegionOut: function(e, code) {
        // return to normal cursor
        document.body.style.cursor = 'default';
    },
    onRegionLabelShow: function(e, label, code) {
        if (!regionResults.hasOwnProperty(code)) {
            // the hovered region is not part of the regionResults, don't show the label
            e.preventDefault();
            return false;
        }
    }
});

更新#1

这是通过集成您的 2 个问题来更新您的代码。

$(function() {
    var RColor = '#007cc4',
        activeRegions = {
            "AL" : RColor,
            "AN" : RColor,
            "EY" : RColor,
            "GH" : RColor,
            "IC" : RColor,
            "KE" : RColor,
            "MU" : RColor,
            "MZ" : RColor,
            "NA" : RColor,
            "NI" : RColor,
            "ZA" : RColor,
            "TZ" : RColor,
            "TU" : RColor,
            "UG" : RColor
        };

    $('#africa-map').vectorMap({
        map: 'africa',
        backgroundColor: 'transparent',
        zoomOnScroll: false,
        zoomButtons: false,
        regionStyle: {
            initial: {
                fill: '#b7bdc3',
                scaleColors: ['#b7bdc3', '#a2aaad'],
                "fill-opacity": 1,
                stroke: '#a2aaad',
                "stroke-width": 2,
                "stroke-opacity": 1
            },
            hover: {
                "fill-opacity": 0.8
            },
            selected: {
                fill: '#a2aaad'
            },
            selectedHover: {
                fill: '#a2aaad'
            }
        },
        series: {
            regions: [{
                values: activeRegions,
                attribute: 'fill'
            }]
        },
        onRegionClick: function(event, code)
        {
            code = code.toLowerCase();

            if (code == "al") {
                window.location = '$AC:MENUURL:2918$';
            }
            if (code == "an") {
                window.location = '$AC:MENUURL:2922$';
            }
            if (code == "ey") {
                window.location = '$AC:MENUURL:2919$';
            }
            if (code == "gh") {
                window.location = '$AC:MENUURL:2937$';
            }
            if (code == "ic") {
                window.location = '$AC:MENUURL:2918$';
            }
            if (code == "ke") {
                window.location = '$AC:MENUURL:2923$';
            }
            if (code == "mu") {
                window.location = '$AC:MENUURL:2924$';
            }
            if (code == "mz") {
                window.location = '$AC:MENUURL:2925$';
            }
            if (code == "na") {
                window.location = '$AC:MENUURL:2926$';
            }
            if (code == "ni") {
                window.location = '$AC:MENUURL:2927$';
            }
            if (code == "tz") {
                window.location = '$AC:MENUURL:2929$';
            }
            if (code == "tu") {
                window.location = '$AC:MENUURL:2930$';
            }
            if (code == "ug") {
                window.location = '$AC:MENUURL:2931$';
            }
            if (code == "za") {
                window.location = '$AC:MENUURL:2928$';
            }
        },
        onRegionOver: function(event, code)
        {
            if (activeRegions.hasOwnProperty(code)) {
                // the hovered region is part of the regionResults, show hand cursor
                document.body.style.cursor = 'pointer';
            }

            var mouseX;
            var mouseY;
            $('path.jvectormap-region.jvectormap-element').mousemove(function(e) {
                var offset = $('#africa-map').offset();
                mouseX = e.pageX - (offset.top) + 20;
                mouseY = e.pageY - (offset.top) - 25;
                $(".region-info-box." + code).css({'top': mouseY, 'left': mouseX});
            });
            $(".region-info-box").hide();
            $(".region-info-box." + code).css({'top': mouseY, 'left': mouseX}).fadeIn('fast');
        },
        onRegionOut: function(e, code) {
            // return to normal cursor
            document.body.style.cursor = 'default';
        },
        onRegionLabelShow: function(e, label, code) {
            if (!activeRegions.hasOwnProperty(code)) {
                // the hovered region is not part of the regionResults, don't show the label
                e.preventDefault();
                return false;
            }
        }
    });
});
于 2013-11-13T16:51:41.083 回答
0

通过简单的 css 修复可以实现向区域添加指针样式：

path.jvectormap-region {
    cursor: pointer;
}
于 2016-06-08T09:48:09.110 回答