0

特定の領域のカーソルを手に変更し、それらの領域のみのラベルを表示する方法を見つけようとしています。

私はこれを持っていますが、これを行う方法がわかりません。誰か助けてくれませんか？

$(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');
              }
        });
    });

はありますが、onRegionOver上記の領域のみハンド カーソルとラベルを表示するようにするには途方に暮れています。

これは、このhttp://jsfiddle.net/a9Xj6/2/ の jsfiddle です。ここにリンクの説明を入力してください

4

2 に答える 2

3

実際、onRegionOverイベントやonRegionLabelShowラベル操作を利用できます。コールバックで戻るfalseと、関数の実行が停止します。この場合、領域をホバリングするときにラベル レンダリングの実行を停止できます。

カーソルを に変更するには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 に答える