jVectorMap标记选定状态

Question

我找到了插件jVectorMap，现在我正在尝试给我选择的州标记一种不同的颜色。希望点击后该州保持“活跃”状态并显示某种颜色，这与悬停发生的方式相同。

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

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

但我不知道如何做到这一点。

有人实现过吗？

- Ricardo Binns

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

- Mads Hansen

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
    }
});

希望这有所帮助！ :)

- Don Cullen