Javascript 自定义标记图标颜色

有没有新的API来创建给定颜色和文本的自定义图标？我想寄一份六边形的颜色

我一直在使用几个URL来生成我的标记图标，但现在它似乎被弃用了

我还没有找到一个新的

这是我的老功能：

    function getIcon(text, fillColor, textColor, outlineColor) {
        if (!text) text = '•'; //generic map dot
        var iconUrl = "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=" + text + "|" + fillColor;
        //var iconUrl = "http://chart.googleapis.com/chart?cht=d&chdp=mapsapi&chl=pin%27i\\%27[" + text + "%27-2%27f\\hv%27a\\]h\\]o\\" + fillColor + "%27fC\\" + textColor + "%27tC\\" + outlineColor + "%27eC\\Lauto%27f\\&ext=.png";
        return iconUrl;
      }

---

提前谢谢

如果您愿意输入一些代码，这里有一个链接可以将图像转换为所需的颜色。

“严格使用”；
类颜色{
构造函数（r、g、b）{
这个集合（r，g，b）；
}
toString（）{
返回`rgb（${Math.round（this.r）}，${Math.round（this.g）}，${Math.round（this.b）}）`；
}
集合（r、g、b）{
此.r=此夹具（r）；
this.g=this.clamp（g）；
此.b=此夹具（b）；
}
hueRotate（角度=0）{
角度=角度/180*Math.PI；
常数sin=数学sin（角度）；
常数cos=数学cos（角度）；
这个是乘法([
0.213+cos*0.787-sin*0.213，
0.715-cos*0.715-sin*0.715，
0.072-cos*0.072+sin*0.928，
0.213-cos*0.213+sin*0.143，
0.715+cos*0.285+sin*0.140，
0.072-cos*0.072-sin*0.283，
0.213-cos*0.213-sin*0.787，
0.715-cos*0.715+sin*0.715，
0.072+cos*0.928+sin*0.072，
]);
}
灰度（值=1）{
这个是乘法([
0.2126+0.7874*（1-值），
0.7152-0.7152*（1-值），
0.0722-0.0722*（1-值），
0.2126-0.2126*（1-值），
0.7152+0.2848*（1-值），
0.0722-0.0722*（1-值），
0.2126-0.2126*（1-值），
0.7152-0.7152*（1-值），
0.0722+0.9278*（1-值），
]);
}
乌贼墨（值=1）{
这个是乘法([
0.393+0.607*（1-值），
0.769-0.769*（1-值），
0.189-0.189*（1-值），
0.349-0.349*（1-值），
0.686+0.314*（1-值），
0.168-0.168*（1-值），
0.272-0.272*（1-值），
0.534-0.534*（1-值），
0.131+0.869*（1-值），
]);
}
饱和（值=1）{
这个是乘法([
0.213+0.787*值，
0.715-0.715*值，
0.072-0.072*值，
0.213-0.213*值，
0.715+0.285*值，
0.072-0.072*值，
0.213-0.213*值，
0.715-0.715*值，
0.072+0.928*值，
]);
}
乘（矩阵）{
const newR=this.clamp（this.r*矩阵[0]+this.g*矩阵[1]+this.b*矩阵[2]）；
const newG=this.clamp（this.r*矩阵[3]+this.g*矩阵[4]+this.b*矩阵[5]）；
const newB=this.clamp（this.r*矩阵[6]+this.g*矩阵[7]+this.b*矩阵[8]）；
这个。r=newR；
this.g=newG；
这个.b=newB；
}
亮度（值=1）{
这是线性的（值）；
}
对比度（值=1）{
这是线性的（值，-（0.5*值）+0.5）；
}
线性（斜率=1，截距=0）{
this.r=this.clamp（this.r*斜率+截距*255）；
this.g=this.clamp（this.g*斜率+截距*255）；
this.b=this.clamp（this.b*斜率+截距*255）；
}
反转（值=1）{
this.r=this.clamp（（值+this.r/255*（1-2*值））*255）；
this.g=this.clamp（（值+this.g/255*（1-2*值））*255）；
this.b=this.clamp（（值+this.b/255*（1-2*值））*255）；
}
hsl（）{
//代码取自https://stackoverflow.com/a/9493060/2688027，根据CC BY-SA获得许可。
常数r=此。r/255；
常数g=此.g/255；
常数b=此。b/255；
常数max=数学最大值（r，g，b）；
常数min=数学min（r，g，b）；
设h，s，l=（max+min）/2；
如果（最大值==最小值）{
h=s=0；
}否则{
常数d=最大-最小值；
s=l>0.5？d/（2-最大-最小）：d/（最大+最小）；
开关（最大值）{
案例r：
h=（g-b）/d+（g255）{
数值=255；
}else if（值<0）{
数值=0；
}
返回值；
}
}
类求解器{
构造函数（目标、基色）{
this.target=目标；
this.targetHSL=target.hsl（）；
this.reusedColor=新颜色（0,0,0）；
}
解决（）{
const result=this.solve窄（this.solveWide（））；
返回{
值：result.values，
损失：结果。损失，
过滤器：this.css（result.values），
};
}
全世界（）{
常数A=5；
常数c=15；
常数a=[6018018000600,1.2,1.2]；
设best={损失：无穷大}；
对于（设i=0；最佳.loss>25&&i<3；i++）{
常量初始值=[50,20,3750,50,100,100]；
const result=this.spsa（A，A，c，initial，1000）；
如果（结果损失<最佳损失）{
最佳=结果；
}
}
回报最好；
}
窄（宽）{
常数A=宽损耗；
常数c=2；
常数A1=A+1；
常数a=[0.25*A1,0.25*A1,A1,0.25*A1,0.2*A1,0.2*A1]；
返回这个.spsa（A，A，c，wide.values，500）；
}
spsa（A、A、c、值、iters）{
常数α=1；
常数伽马=0.16666；
设best=null；
让损失=无限；
常量增量=新数组（6）；
const highArgs=新数组（6）；
const lowArgs=新数组（6）；
for（设k=0；k0.5？1:-1；
高args[i]=值[i]+ck*增量[i]；
低args[i]=值[i]-ck*增量[i]；
}
const lossDiff=this.loss（高args）-this.loss（低args）；
for（设i=0；i<6；i++）{
常数g=损耗因子/（2*ck）*三角洲[i]；
常数ak=a[i]/Math.pow（a+k+1，α）；
值[i]=fix（值[i]-ak*g，i）；
}
常数损耗=该损耗（值）；
如果（损失<最佳值）
'use strict';

class Color {
  constructor(r, g, b) {
    this.set(r, g, b);
  }

  toString() {
    return `rgb(${Math.round(this.r)}, ${Math.round(this.g)}, ${Math.round(this.b)})`;
  }

  set(r, g, b) {
    this.r = this.clamp(r);
    this.g = this.clamp(g);
    this.b = this.clamp(b);
  }

  hueRotate(angle = 0) {
    angle = angle / 180 * Math.PI;
    const sin = Math.sin(angle);
    const cos = Math.cos(angle);

    this.multiply([
      0.213 + cos * 0.787 - sin * 0.213,
      0.715 - cos * 0.715 - sin * 0.715,
      0.072 - cos * 0.072 + sin * 0.928,
      0.213 - cos * 0.213 + sin * 0.143,
      0.715 + cos * 0.285 + sin * 0.140,
      0.072 - cos * 0.072 - sin * 0.283,
      0.213 - cos * 0.213 - sin * 0.787,
      0.715 - cos * 0.715 + sin * 0.715,
      0.072 + cos * 0.928 + sin * 0.072,
    ]);
  }

  grayscale(value = 1) {
    this.multiply([
      0.2126 + 0.7874 * (1 - value),
      0.7152 - 0.7152 * (1 - value),
      0.0722 - 0.0722 * (1 - value),
      0.2126 - 0.2126 * (1 - value),
      0.7152 + 0.2848 * (1 - value),
      0.0722 - 0.0722 * (1 - value),
      0.2126 - 0.2126 * (1 - value),
      0.7152 - 0.7152 * (1 - value),
      0.0722 + 0.9278 * (1 - value),
    ]);
  }

  sepia(value = 1) {
    this.multiply([
      0.393 + 0.607 * (1 - value),
      0.769 - 0.769 * (1 - value),
      0.189 - 0.189 * (1 - value),
      0.349 - 0.349 * (1 - value),
      0.686 + 0.314 * (1 - value),
      0.168 - 0.168 * (1 - value),
      0.272 - 0.272 * (1 - value),
      0.534 - 0.534 * (1 - value),
      0.131 + 0.869 * (1 - value),
    ]);
  }

  saturate(value = 1) {
    this.multiply([
      0.213 + 0.787 * value,
      0.715 - 0.715 * value,
      0.072 - 0.072 * value,
      0.213 - 0.213 * value,
      0.715 + 0.285 * value,
      0.072 - 0.072 * value,
      0.213 - 0.213 * value,
      0.715 - 0.715 * value,
      0.072 + 0.928 * value,
    ]);
  }

  multiply(matrix) {
    const newR = this.clamp(this.r * matrix[0] + this.g * matrix[1] + this.b * matrix[2]);
    const newG = this.clamp(this.r * matrix[3] + this.g * matrix[4] + this.b * matrix[5]);
    const newB = this.clamp(this.r * matrix[6] + this.g * matrix[7] + this.b * matrix[8]);
    this.r = newR;
    this.g = newG;
    this.b = newB;
  }

  brightness(value = 1) {
    this.linear(value);
  }
  contrast(value = 1) {
    this.linear(value, -(0.5 * value) + 0.5);
  }

  linear(slope = 1, intercept = 0) {
    this.r = this.clamp(this.r * slope + intercept * 255);
    this.g = this.clamp(this.g * slope + intercept * 255);
    this.b = this.clamp(this.b * slope + intercept * 255);
  }

  invert(value = 1) {
    this.r = this.clamp((value + this.r / 255 * (1 - 2 * value)) * 255);
    this.g = this.clamp((value + this.g / 255 * (1 - 2 * value)) * 255);
    this.b = this.clamp((value + this.b / 255 * (1 - 2 * value)) * 255);
  }

  hsl() {
    // Code taken from https://stackoverflow.com/a/9493060/2688027, licensed under CC BY-SA.
    const r = this.r / 255;
    const g = this.g / 255;
    const b = this.b / 255;
    const max = Math.max(r, g, b);
    const min = Math.min(r, g, b);
    let h, s, l = (max + min) / 2;

    if (max === min) {
      h = s = 0;
    } else {
      const d = max - min;
      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
      switch (max) {
        case r:
          h = (g - b) / d + (g < b ? 6 : 0);
          break;

        case g:
          h = (b - r) / d + 2;
          break;

        case b:
          h = (r - g) / d + 4;
          break;
      }
      h /= 6;
    }

    return {
      h: h * 100,
      s: s * 100,
      l: l * 100,
    };
  }

  clamp(value) {
    if (value > 255) {
      value = 255;
    } else if (value < 0) {
      value = 0;
    }
    return value;
  }
}

class Solver {
  constructor(target, baseColor) {
    this.target = target;
    this.targetHSL = target.hsl();
    this.reusedColor = new Color(0, 0, 0);
  }

  solve() {
    const result = this.solveNarrow(this.solveWide());
    return {
      values: result.values,
      loss: result.loss,
      filter: this.css(result.values),
    };
  }

  solveWide() {
    const A = 5;
    const c = 15;
    const a = [60, 180, 18000, 600, 1.2, 1.2];

    let best = { loss: Infinity };
    for (let i = 0; best.loss > 25 && i < 3; i++) {
      const initial = [50, 20, 3750, 50, 100, 100];
      const result = this.spsa(A, a, c, initial, 1000);
      if (result.loss < best.loss) {
        best = result;
      }
    }
    return best;
  }

  solveNarrow(wide) {
    const A = wide.loss;
    const c = 2;
    const A1 = A + 1;
    const a = [0.25 * A1, 0.25 * A1, A1, 0.25 * A1, 0.2 * A1, 0.2 * A1];
    return this.spsa(A, a, c, wide.values, 500);
  }

  spsa(A, a, c, values, iters) {
    const alpha = 1;
    const gamma = 0.16666666666666666;

    let best = null;
    let bestLoss = Infinity;
    const deltas = new Array(6);
    const highArgs = new Array(6);
    const lowArgs = new Array(6);

    for (let k = 0; k < iters; k++) {
      const ck = c / Math.pow(k + 1, gamma);
      for (let i = 0; i < 6; i++) {
        deltas[i] = Math.random() > 0.5 ? 1 : -1;
        highArgs[i] = values[i] + ck * deltas[i];
        lowArgs[i] = values[i] - ck * deltas[i];
      }

      const lossDiff = this.loss(highArgs) - this.loss(lowArgs);
      for (let i = 0; i < 6; i++) {
        const g = lossDiff / (2 * ck) * deltas[i];
        const ak = a[i] / Math.pow(A + k + 1, alpha);
        values[i] = fix(values[i] - ak * g, i);
      }

      const loss = this.loss(values);
      if (loss < bestLoss) {
        best = values.slice(0);
        bestLoss = loss;
      }
    }
    return { values: best, loss: bestLoss };

    function fix(value, idx) {
      let max = 100;
      if (idx === 2 /* saturate */) {
        max = 7500;
      } else if (idx === 4 /* brightness */ || idx === 5 /* contrast */) {
        max = 200;
      }

      if (idx === 3 /* hue-rotate */) {
        if (value > max) {
          value %= max;
        } else if (value < 0) {
          value = max + value % max;
        }
      } else if (value < 0) {
        value = 0;
      } else if (value > max) {
        value = max;
      }
      return value;
    }
  }

  loss(filters) {
    // Argument is array of percentages.
    const color = this.reusedColor;
    color.set(0, 0, 0);

    color.invert(filters[0] / 100);
    color.sepia(filters[1] / 100);
    color.saturate(filters[2] / 100);
    color.hueRotate(filters[3] * 3.6);
    color.brightness(filters[4] / 100);
    color.contrast(filters[5] / 100);

    const colorHSL = color.hsl();
    return (
      Math.abs(color.r - this.target.r) +
      Math.abs(color.g - this.target.g) +
      Math.abs(color.b - this.target.b) +
      Math.abs(colorHSL.h - this.targetHSL.h) +
      Math.abs(colorHSL.s - this.targetHSL.s) +
      Math.abs(colorHSL.l - this.targetHSL.l)
    );
  }

  css(filters) {
    function fmt(idx, multiplier = 1) {
      return Math.round(filters[idx] * multiplier);
    }
    return `filter: invert(${fmt(0)}%) sepia(${fmt(1)}%) saturate(${fmt(2)}%) hue-rotate(${fmt(3, 3.6)}deg) brightness(${fmt(4)}%) contrast(${fmt(5)}%);`;
  }
}

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, (m, r, g, b) => {
    return r + r + g + g + b + b;
  });

  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result
    ? [
      parseInt(result[1], 16),
      parseInt(result[2], 16),
      parseInt(result[3], 16),
    ]
    : null;
}

$(document).ready(() => {
  $('button.execute').click(() => {
    const rgb = hexToRgb($('input.target').val());
    if (rgb.length !== 3) {
      alert('Invalid format!');
      return;
    }

    const color = new Color(rgb[0], rgb[1], rgb[2]);
    const solver = new Solver(color);
    const result = solver.solve();

    let lossMsg;
    if (result.loss < 1) {
      lossMsg = 'This is a perfect result.';
    } else if (result.loss < 5) {
      lossMsg = 'The is close enough.';
    } else if (result.loss < 15) {
      lossMsg = 'The color is somewhat off. Consider running it again.';
    } else {
      lossMsg = 'The color is extremely off. Run it again!';
    }

    $('.realPixel').css('background-color', color.toString());
    $('.filterPixel').attr('style', result.filter);
    $('.filterDetail').text(result.filter);
    $('.lossDetail').html(`Loss: ${result.loss.toFixed(1)}. <b>${lossMsg}</b>`);
  });
});