javascript - 如何根据 Json 响应更改 jqvmap 上的状态颜色？

Question

我已经在服务器中实现了这张美国 map ，但我试图根据 mysql 响应更改某些状态的颜色，但我无法做到这一点

这是我的代码

<script type="text/javascript" src="includes/js/jquery-2.1.0.min.js">

</script>
<script src="includes/js/jquery.vmap.js"></script>
<script src="includes/js/jquery.vmap.canada.js"></script>
<script src="includes/js/jquery.vmap.usa.js"></script>

<script>
$(document).ready(function(){
    var states_colors = {};
    var states = {};
    $.post("state_service.php", function(data) {
        var states_data = data.split(',');
        for (var i = 0; i < states_data.length; i++) {
            states[i] = states_data[i].replace(/[""\[\]]+/g, '');
            states_colors[i] = states[i]+': #8EE5EE,';
        };
        console.log(states_colors);
        $('#vmap').vectorMap('set', 'colors', states_colors);
    });

    $('#vmap').vectorMap({
        map: 'usa_en',
        backgroundColor: null,
        color: '#F58025',
        hoverColor: '#754200',
        selectedColor: '#754200',
        enableZoom: false,
        showTooltip: false,
        onRegionClick: function(element, code)
        {
            var arr = [];
            arr = code.split('-');
            var url = 'search.php?';
            var query = 'keywords=&city=&state='+arr[1];
            window.location.href = url + query;
        }
    });
});
</script>

<div id="vmap" style="width: 600px; height: 600px;"></div>

这就是 Json 响应带给我的，这是我想强调的状态

["AB","CO","UT"]

Answer 1

根据文档，以下功能是正确的

$('#vmap').vectorMap('set', 'colors', states_colors);

但是 setColors 函数将键和颜色作为参数。所以我改为关注，它开始工作了

$('#vmap').vectorMap('set', 'colors', states[i], '#8EE5EE');

示例:http://codepen.io/anon/pen/RPjJYb

为网站使用了以下库

http://jqvmap.com/js/vmap/jquery.vmap.js?v=1.0
http://jqvmap.com/js/vmap/jquery.vmap.usa.js?v=1.0