0

我正在使用 Jvectormap 在我的页面上放置 2 个地图。地图放置正常，一切都很好。它们被放置在 2 个不同的 div 中：

<div id="map1">
    </div>

<div id="map2">
    </div>

和jQuery：

$(function () {
    $('#map1').vectorMap({
        color: '#aaaaaa',
        backgroundColor: '#ffffff',
        hoverOpacity: 1,
        hoverColor: true
    });
});

$(function () {
    $('#map2').vectorMap({
        color: '#aaaaaa',
        backgroundColor: '#ffffff',
        hoverOpacity: 1,
    });
});

现在，当我尝试使用以下方法动态更改 map2 的颜色时：

$("#map2").vectorMap("set", "colors", colorsDictionnary);

仅更改了第一个的颜色。

这仅在更改颜色时发生。即使我正在使用，第一个总是改变它的颜色$("#map2")

如何在不触摸 map1 的情况下更改 map2 的颜色？

非常感谢您的帮助，我真的需要它

4

1 回答 1

3

这是否完成了您正在尝试做的事情？

http://jsfiddle.net/qFHyF/

这个答案建立在我在这里发布的一个问题的答案之上： jvectormap region colors

JavaScript

(function() {
    var myCustomColorsOne = {
        'AU-SA': '#4E7387',
        'AU-WA': '#333333',
        'AU-VIC': '#89AFBF',
        'AU-TAS': '#817F8E',
        'AU-QLD': '#344B5E',
        'AU-NSW': '#344B5E',
        'AU-ACT': '#344B5E',
        'AU-NT': '#344B5E'
    };
    var myCustomColorsTwo = {
        'AU-SA': '#803300',
        'AU-WA': '#993D00',
        'AU-VIC': '#B24700',
        'AU-TAS': '#CC5200',
        'AU-QLD': '#E65C00',
        'AU-NSW': '#FF7519',
        'AU-ACT': '#FF8533',
        'AU-NT': '#FFB280'
    };
    var myCustomColorsThree = {
        'AU-SA': '#B8E186',
        'AU-WA': '#B8E186',
        'AU-VIC': '#B8E186',
        'AU-TAS': '#B8E186',
        'AU-QLD': '#B8E186',
        'AU-NSW': '#B8E186',
        'AU-ACT': '#B8E186',
        'AU-NT': '#B8E186'
    };

    mapOne = new jvm.WorldMap({
        map: 'au_merc_en',
        container: $('#ausieOne'),
        backgroundColor: '#EFF7FF',
        series: {
            regions: [{
                attribute: 'fill'}]
        }
    });

    mapTwo = new jvm.WorldMap({
        map: 'au_merc_en',
        container: $('#ausieTwo'),
        backgroundColor: '#EFF7FF',
        colors: '#3377CC',
        regionStyle: {
            initial: {
                fill: '#B8E186'
            }
        },
        series: {
            regions: [{
                attribute: 'fill'}]
        }
    });

    mapOne.series.regions[0].setValues(myCustomColorsOne);

    $("#color-changer").click(function() {
        var $that = $(this);
        if ($that.hasClass("green")) {
            $that.removeClass("green");
            mapTwo.series.regions[0].setValues(myCustomColorsTwo);
        } else {
            $that.addClass("green");
            mapTwo.series.regions[0].setValues(myCustomColorsThree);
        }
        return false;
    });

})();​

HTML

<a href="#" id="color-changer" class="green">Change colors of Map Two</a>
<p>Map One</p>
<div style="width: 354px; height: 300px" id="ausieOne" data-projection="mill" data-name="au_mill_en"></div>
<p>Map Two</p>
<div style="width: 354px; height: 300px" id="ausieTwo" data-projection="mill" data-name="au_mill_en"></div>
于 2012-10-13T15:33:12.113 回答