2016-07-04 41 views
2

我正在使用JVectorMap在地圖上顯示一些訪問數據。這是代碼。JVectorMap在單擊國家後縮放或值發生更改時,不會着色區域

var euroMap = new jvm.MultiMap({ 
 
     container: $('#map'), 
 
     regionsSelectable: true, 
 
    regionsSelectableOne: true, 
 
     maxLevel: 1, 
 
     main: { 
 
     map: 'europe_mill', 
 
     backgroundColor: 'transparent', 
 
     regionStyle: { 
 
      initial: { 
 
      fill: 'white', 
 
      "fill-opacity": 1, 
 
      stroke: '#000', 
 
      "stroke-width": 0.3, 
 
      "stroke-opacity": 1 
 
      }, 
 
     }, 
 
     series: { 
 
      regions: [{ 
 
      scale: ['#FFFFFF', '#DB715C'], 
 
      values: gon.map_data['ptps'], 
 
      normalizeFunction: 'polynomial' 
 
      }] 
 
     }, 
 
     onRegionTipShow: function(event, label, index){ 
 
      label.html(
 
      '<b>'+label.html()+'</b></br>'+ 
 
      '<b>#{t 'navbar.views'}: </b>'+(gon.map_data['views'][index]==undefined ? "0" : gon.map_data['views'][index])+'</b></br>'+ 
 
      '<b>#{t 'navbar.ptps'}: </b>'+(gon.map_data['ptps'][index]==undefined ? "0" : gon.map_data['ptps'][index])+'</b></br>'+ 
 
      '<b>#{t 'navbar.payments'}: </b>'+(gon.map_data['payments'][index]==undefined ? "0" : gon.map_data['payments'][index])+'</b></br>'+ 
 
      '<b>Payed/Viewed: </b>'+(gon.map_data['v_p_ratio'][index]==undefined ? "0" : gon.map_data['v_p_ratio'][index])+'%<br/>'+ 
 
      '<b>Negotiated/Viewed: </b>'+(gon.map_data['v_n_ratio'][index]==undefined ? "0" : gon.map_data['v_n_ratio'][index])+'%<br/>'+ 
 
      '<b>Payed/Negotiated: </b>'+(gon.map_data['n_p_ratio'][index]==undefined ? "0" : gon.map_data['n_p_ratio'][index])+'%<br/>' 
 
     ); 
 
     }, 
 
     onViewportChange: function(event, scale) {}, 
 
     onRegionOver: function(event, code) {}, 
 
     onRegionClick: function(event, code) {} 
 
     }, 
 
     mapUrlByCode: function(code, multiMap){ 
 
     return '/assets/maps/'+code.toLowerCase()+'_'+multiMap.defaultProjection+'.js'; 
 
     } 
 
    });

,如果我有它運行的代碼(CoffeeScript的)一個下拉按鈕,會發生什麼:

$('.map_selector').click (event) -> 
 
     event.preventDefault() 
 
     map = $('#map .jvectormap-container').data('mapObject') 
 
     map.series.regions[0].clear() 
 
     
 
     map.series.regions[0].setValues(gon.map_data[event.currentTarget.dataset.filter]) 
 
     map.series.regions[0].setScale(['#FFFFFF', '#DB715C'])

而且它應該重置地圖根據新數據重新繪製比例尺和值並重新着色地圖。

底圖是歐洲地圖,在這張地圖上工作時,一切正常,當我改變map_selector時,所有的地圖顏色都會根據新的值再次改變,但是當我點擊任何國家看到區域的數據,不起作用,無論我更改de map_selector多少次,區域都保持相同的顏色。

有誰知道爲什麼?

在此先感謝

回答

0

Finnally我通過每一次的值改爲創建地圖的新實例來解決這個問題,因爲你改變它影響了一般地圖的值向下鑽取地圖每次,在我的情況歐洲,但不影響分區域。

所以,與其這樣

map.series.regions[0].setValues

你必須生成地圖的重裝值和向下鑽取區域將被正確填寫一個新的實例。