當頁面上有2個地圖時，更改JvectorMap的顏色

Question

我正在使用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的顏色？

非常感謝您的幫助，我真的需要它

Answer 1

這是否完成你正在嘗試做什麼？

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>