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

【问题标题】：jqvmap - applying color to multiple states/regionsjqvmap - 将颜色应用于多个州/地区
【发布时间】：2013-08-06 19:15:32
【问题描述】：

使用 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'}); 
}

但这似乎不起作用。谢谢

【问题讨论】：

不确定您发布问题时是否只是拼写错误，但我认为您的 astates 变量不应该用引号引起来。但是你是正确的，它需要是一个字符串......所以要么转义那些引号，要么做丑陋的旧 '''+astates[i]+''' 你的循环看起来应该可以正常工作。
查看这个 SO 问题：stackoverflow.com/questions/15510913/…

标签： jquery jqvmap

【解决方案1】：

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});

【讨论】：

【解决方案2】：

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

【讨论】：

通过colorST[i]，您不是将状态分配为属性，而是分配它们的索引。这就是你会得到的：0: 'red', 1: 'red'，等等......所以，你应该做colorST[astates[i]] = 'red'。这将按预期分配州名称。

【解决方案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);

【讨论】：