Question

我正在使用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多少次，区域都保持相同的颜色。

有谁知道为什么？

提前致谢

Answer 1

最终我能够通过每次更改值时创建地图的新实例来解决此问题，因为在每次更改值时，在每次更改值时，它会影响一般地图，在我的情况下是欧洲，但不是影响子区域。

所以，而不是这个

＆＃13;

map.series.regions[0].setValues

＆＃13;

您必须生成重新加载值的地图的新实例，并且将正确填充向下钻取区域。

单击国家/地区后，当缩放或值更改时，JVectorMap“向下钻取”不会对区域进行着色

1 个答案: