在jvectormap中为各个区域设置样式

Question

所以，我有一个自定义的jVectorMap，并且成功地使用jVectorMap API中的以下代码更改了区域的颜色：

regionStyle: {
      initial: {
      fill: '#5e7073',
      "fill-opacity": 1,
      stroke: 'none',
      "stroke-width": 0,
      "stroke-opacity": 1
      },
      hover: {
      fill: 'black'
      }, 

但是我想单独控制地图上每个区域的填充/悬停属性。有人做过这个或者有实现方法吗？我查看了jVectorMap的API，但没有找到解决办法。

Marca

- Marcatectura

Answer 1

首先，您需要知道要更改的区域的代码。您可以从正在使用的地图文件中获取这些代码。以下示例是针对美国地图的。

如果要更改填充颜色，您可以在创建地图时自定义区域：

regionStyle: {
    //...
},
series: {
    regions: [{
        values: {
            'US-CA': '#3e9d01',
            'US-WA': '#4b93c1',
            'US-TX': '#c1a14b'
        },
        attribute: 'fill'
    }]
}

您可以即时自定义它们（上面的“values”参数不是必需的）：

$(function(){
    var map = $('#map').vectorMap('get', 'mapObject');
    map.series.regions[0].setValues({
        'US-CA': '#3e9d01'
    });
});

- David

---

需要注意的是，如果您正在使用“scale”，则需要使用比例值设置setValues。因此，如果这是我的系列，则为：series：{     regions：[{      scale：{        红色：'#ff0000'，        蓝色：'#0000ff'，        Swing：'#00ff00'      },      attribute：'fill'，      values：{      }，      legend：{        horizontal：true，        title：'政治取向'      }     }]    }，然后您说，var myCustomColors = {    'US-CA'：'Swing'，    'US-TX'：'Swing'，    'US-FL'：'Swing'  };，然后...    map.series.regions [0] .setValues（myCustomColors）; - Joseph Astrahan

Answer 2

我在jquery-jvectormap-1.1.1.js中添加了一个自定义方法。

检查http://pastebin.com/MSt94XuH中的所有脚本。

setSelectedRegionStyle : function (r,c) {
return this.regions[r].element.style.selected.fill = c;
},

你需要获取地图的引用：

map = $("#world-map-gdp").vectorMap('get', 'mapObject');

为每个国家设置自定义样式：

map.setSelectedRegionStyle('IT', '#b2c9cb');
map.setSelectedRegionStyle('AT', '#b2c9cb');
map.setSelectedRegionStyle('BE', '#b2c9cb');

如果您需要清除所有样式，请使用：

map.clearSelectedRegions();

- Blas Ruiz