Question

使用jquery和jqvmap，我在美国地图中设置了多种状态颜色。例如，要将所有以“A”红色开头的状态着色，这样可以起作用：

jQuery('#vmap').vectorMap('set', 'colors', {al: 'red'});
jQuery('#vmap').vectorMap('set', 'colors', {ak: 'red'});
jQuery('#vmap').vectorMap('set', 'colors', {az: 'red'});
jQuery('#vmap').vectorMap('set', 'colors', {ar: 'red'});

有没有办法缩短它？我想这样做：

var astates = ["al", "ak", "az", "ar"];
for (var i = 0; i < astates.length; ++i) {
    jQuery('#vmap').vectorMap('set', 'colors', { 'astates[i]' : 'red'}); 
}

但这似乎不起作用。感谢

Answer 1

colorsST = {};
var astates = ["al", "ak", "az", "ar"];
for (var i = 0; i < astates.length; ++i) {
    colorST[i] = 'red';
    jQuery('#vmap').vectorMap('set', 'colors', colorST); 
}

Answer 2

var fc = 'red'; // you'll need this if you'll want to change the whole group color someday
jQuery('#vmap').vectorMap('set', 'colors', {al: fc, ak: fc, az: fc, ar:fc});

Answer 3

我正在按以下方式使用此功能：

let colors =  < any > {};

let colors = {
    "zz": "#006491",
    "us": "#1a769f",
    "nl": "#bde6f9",
    "at": "#c0e8fa",
    "tr": "#c0e8fa",
    "ie": "#c0e9fb"
}

jQuery('#vmap').vectorMap('set', 'colors', colors);

也许您需要不同的颜色（我需要:)），例如，根据某个值，您可以计算一些起始颜色，并使用最小值和最大值进行计算

let myValuesMap: Map<string, number> = new Map(); //{"zz" => 3011, "us" => 2669, "at" => 260, "nl" => 172, "tr" => 148, "ie"=>101}
let max = 0, min = Number.MAX_VALUE, startColor = [200, 238, 255], endColor = [0, 100, 145], colors = <any>{}, hex;

myValuesMap.forEach((value: number, key: string) => {
  if (value > max) { max = value }
  if (value < min) { min = value }
});

myValuesMap.forEach((value: number, key: string) => {
  if (value > 0) {
    colors[key] = '#';
    for (var i = 0; i < 3; i++) {
      hex = Math.round(startColor[i] + (endColor[i] - startColor[i]) * (value == max ? 1 : (value / (max - min)))).toString(16);
      if (hex.length == 1) { hex = '0' + hex; }
      colors[key] += (hex.length == 1 ? '0' : '') + hex;
    }
  }
});

jQuery('#vmap').vectorMap('set', 'colors', colors);

jqvmap - 将颜色应用于多个州/地区

3 个答案: