5

所以，

我有一个自定义的 jVectorMap，我已经成功地使用 jVectorMap API 中的代码更改了区域的颜色：

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

但我试图单独控制地图每个区域的填充/悬停属性。有没有人这样做或知道如何实现它？我查看了 jVectorMap API，但无济于事。

马卡

4

2 回答 2

14

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

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

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

或者您可以即时自定义它们（并且不需要上面的“值”参数）：

$(function(){
    var map = $('#map').vectorMap('get', 'mapObject');
    map.series.regions[0].setValues({
        'US-CA': '#3e9d01'
    });
});
于 2013-04-05T12:37:47.110 回答
1

我在 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();
于 2013-04-12T18:19:57.810 回答