示例代码：

<script src="Mobile Portal Management Tool (MPMT)_files/jqvmap/maps/jquery.vmap.usa.js" type="text/javascript"></script>
<script type="text/javascript">

jQuery(document).ready(function() {
    jQuery('#vmap').vectorMap({
        map: 'usa_en',
        enableZoom: true,
        showTooltip: true,
    //    selectedRegion: 'MO'
        onRegionClick: function(event, code, region)
        {
           /* var message = 'You selected "'
                + region 
                + '" which has the code: '
                + code.toUpperCase()
     //       alert(message);
            $('#location-selected').html(message); */



            var ul = $('#location-selected');
            var list = ul.children('li');
            var isInList = false;
            for(var i = 0; i < list.length; i++){
                if(list[i].innerHTML === region) {
                    isInList = true;
                    break;
                }
            }
            if(isInList)
                alert("User selected region already in the list")
            else
                var newli = $('<li></li>').html(region).appendTo(ul);       

            $('ul').children('li').on('dblclick',function()
            {
                //alert("Selected list item will be removed from the list...")
                $(this).remove();
            });
         }


    });
</script>

Answer 1

您可以通过将属性colors分配给所选区域来执行此操作。例如，为了使加州蓝色，您可以写这样的东西

    var highlight = {colors: {ca : '#0000ff'}}

要设置时钟回调的colors属性，可以调用此

    onRegionClick: function(element, code, region) {
        $('#vmap').vectorMap('set', 'colors', highlight);
    }

并切换可在if开关中添加的颜色，该开关仅检查元素是否具有突出显示颜色集。此外，您还可以使用向列表中添加/删除区域。

    $(document).ready(function() {
        highlight = {};
        $('#vmap').vectorMap({
            map: 'usa_en',
            enableZoom: true,
            showTooltip: true,
            color: '#f4f3f0',
            onRegionClick: function(element, code, region) {
                if(highlight[code]!=='#0000ff'){
                    highlight[code]='#0000ff';
                    $('<li id=\"li_'+code+'\"></li>').html(region).appendTo($('#location-selected'));
                } else {
                    highlight[code]='#f4f3f0';
                    $('#li_'+code).remove();
                }
                $('#vmap').vectorMap('set', 'colors', highlight);
            },
             onRegionOut: function(element, code, region){
                 $('#vmap').vectorMap('set', 'colors', highlight);
             },
        });
    });

我也把它放在jsfiddle上以便快速说明： http://jsfiddle.net/FxVzG/

要使其正常工作，您还需要在onRegionOut。

中设置颜色

Answer 2

创建一个CSS类来突出显示然后使用JS或jQuery来切换？

CSS高亮课程：

.highlighted {
    -webkit-box-shadow: 0 0 8px #FFD700;
    -moz-box-shadow: 0 0 8px #FFD700;
    box-shadow: 0 0 8px #FFD700;
    cursor:pointer;
}

jQuery切换

$(document).ready(function(){
    $('#text').click(function(){
        $(this).toggleClass('highlighted');
    });
});

来自Codecademy的示例：JSFiddle

在jQuery矢量地图中切换功能

示例代码：

2 个答案: