Question

我找到了插件jVectorMap，我试图用我的颜色标记我选择的状态

与悬停发生的方式相同，但我想要的是，当点击时，状态会保持“活跃”某种颜色。

该插件有一些操作，例如onRegionClick：

$('#map-teste').vectorMap({
    map: 'br_en',
    onRegionClick: function(event, code){
        alert(code); // return the state
    }
});

但我不知道该怎么做。

有没有人实现这个目标？

Answer 1

您可以通过将regionStyle配置参数添加到地图的实例来为所选区域设置颜色。您还需要将regionSelectable设置为true：

$('#map-teste').vectorMap({
    map: 'br_en',
    onRegionClick: function(event, code){
        alert(code); // return the state
    },
    regionsSelectable: true,
    regionStyle: {
        selected: {
            fill: 'orange'
        }
    }
});

Answer 2

你可以这样做：

$('#map-teste').vectorMap({
    map: 'br_en',
    onRegionClick: function(event, code){
        $('#map-teste').vectorMap('set', 'colors', code, '#000000');
        alert(code); // return the state
    }
});

对我来说很好。这将导致多次选择而不进行切换。如果您需要'切换'以获得“单选”效果，您可以这样做：

currentSelected = '';
defaultColor = '#00FF00';
selectedColor = '#FF00FF'; 
maphandle = $('#map-teste'); 

maphandle.vectorMap({
    map: 'br_en',
    onRegionClick: function(event, code){
        if(currentSelected !== code) {
            if(currentSelected !== ''){
                // Deselect, then select new choice
                maphandle.vectorMap('set', 'colors', currentSelected, defaultColor);
                maphandle.vectorMap('set', 'colors', code, selectedColor);
                currentSelected = code;
            } else {
                // Nothing currently selected, go ahead and select
                maphandle.vectorMap('set', 'colors', code, selectedColor);
                currentSelected = code;
            }
        } else {
            // Deselect
            maphandle.vectorMap('set', 'colors', code, defaultColor);
            currentSelected = '';
        }
        alert(code); // return the state
    }
});

希望有所帮助！：）

jVectorMap标记选中状态

2 个答案: