求推荐支持十六进制颜色的自定义标记图标生成新API

Great question! The Google Charts map pin APIs you relied on have been deprecated, so let’s cover reliable alternatives that let you generate custom icons with hex colors and text—no risk of future deprecation from third-party services.

Recommended: Generate SVG Icons Locally (No External API) #

The most robust approach is to create SVG icons as data URLs directly in your code. SVGs are vector-based (so they scale perfectly), fully customizable, and don’t depend on external services. Here’s a drop-in replacement for your old function:

function getIcon(text, fillColor, textColor, outlineColor) {
  if (!text) text = '•'; // Fallback to generic map dot
  // Default colors if not provided (adjust as needed)
  fillColor = fillColor || '#FF0000';
  textColor = textColor || '#FFFFFF';
  outlineColor = outlineColor || '#000000';

  // Build SVG as a data URL
  const svg = `
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
      <!-- Pin background circle -->
      <circle cx="16" cy="16" r="14" fill="${fillColor}" stroke="${outlineColor}" stroke-width="2"/>
      <!-- Centered text -->
      <text x="16" y="20" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="${textColor}" text-anchor="middle" dominant-baseline="middle">${text}</text>
    </svg>
  `.replace(/\s+/g, ' ').trim(); // Minify whitespace for cleaner URL

  return `data:image/svg+xml;base64,${btoa(svg)}`;
}

Key Details: #

• Hex Color Support: You can pass any valid hex color (e.g., #FF5733, #000) for fillColor, textColor, and outlineColor.
• Full Customization: Adjust the width, height, circle radius, font size, or add extra SVG elements to match your old icon’s exact style.
• Seamless Usage: The returned data URL works just like your old icon URL—use it directly as the src for images or map marker icons.

Bonus: Canvas-Based Alternative #

If you prefer working with Canvas, here’s another option that generates a PNG data URL:

function getCanvasIcon(text, fillColor, textColor, outlineColor) {
  if (!text) text = '•';
  fillColor = fillColor || '#FF0000';
  textColor = textColor || '#FFFFFF';
  outlineColor = outlineColor || '#000000';

  const canvas = document.createElement('canvas');
  canvas.width = 32;
  canvas.height = 32;
  const ctx = canvas.getContext('2d');

  // Draw pin background
  ctx.beginPath();
  ctx.arc(16, 16, 14, 0, Math.PI * 2);
  ctx.fillStyle = fillColor;
  ctx.fill();
  ctx.strokeStyle = outlineColor;
  ctx.lineWidth = 2;
  ctx.stroke();

  // Draw centered text
  ctx.font = 'bold 16px Arial, sans-serif';
  ctx.fillStyle = textColor;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(text, 16, 16);

  return canvas.toDataURL('image/png');
}

Why These Solutions Are Better: #

• No External Dependencies: You won’t have to stress about third-party APIs being deprecated or going offline.
• Total Control: Tweak every detail of the icon (size, shape, font, spacing) to replicate your original design perfectly.

内容的提问来源于stack exchange，提问作者Marcos de las Heras