2016-07-04 31 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

你必须生成地图的重装值和向下钻取区域将被正确填写一个新的实例。

相关问题