javascript - jQuery 矢量 map 中的切换功能

Question

如何在jQuery矢量图中实现切换功能，

我的要求是:如果用户选择了任何区域，它应该用颜色突出显示。 如果用户点击同一区域，它应该进入旧状态(没有颜色或默认状态)。

我可以使用 JS 和 jQuery 来实现吗，或者我需要任何其他插件的帮助。

非常感谢任何想法、建议和指导。谢谢

示例代码:

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

要从时钟回调中设置颜色属性，您可以调用它

    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 中设置颜色。