请求编写生成带编号地图SVG路径图标的JavaScript函数

嘿，我完全懂你的需求——要一个能根据输入的整数，生成带编号的SVG地图标记的JavaScript函数，而且得是能直接喂给你用的地图库的字符串格式对吧？这事儿挺常见的，我给你整一个实用的版本，直接就能上手用。

我给你写的这个函数会生成一个经典的圆形底+数字的标记（你要是喜欢水滴形也可以改路径），还支持自定义大小、背景色和文字颜色，适配一位数和两位数的数字，保证数字在标记里居中显示。

function generateNumberedMapPin(number, size = 30, bgColor = "#ff5722", textColor = "#ffffff") {
  // 计算标记的基础尺寸，确保文本居中
  const radius = size / 2;
  const textOffset = number > 9 ? 3 : 0; // 两位数时微调文本位置

  // 构建完整的SVG字符串
  return `
    <svg viewBox="0 0 ${size} ${size}" width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg">
      <!-- 标记背景（圆形，你可以换成水滴形路径） -->
      <circle cx="${radius}" cy="${radius}" r="${radius * 0.8}" fill="${bgColor}" stroke="#fff" stroke-width="2"/>
      <!-- 编号文本 -->
      <text x="${radius}" y="${radius + 5}" font-family="Arial, sans-serif" font-size="${radius * 0.6}" font-weight="bold" fill="${textColor}" text-anchor="middle">${number}</text>
    </svg>
  `.trim();
}

简单说明一下： #

• 函数的第一个参数是必填的number，就是你要显示的编号；后面三个是可选参数，分别控制标记大小、背景色和文字颜色。
• 如果你想要水滴形的标记，只需要把<circle>标签换成对应的路径就行，比如：

  <path d="M${radius},${size} C${radius*1.5},${size*0.7} ${size},${radius*0.6} ${radius},0 C0,${radius*0.6} ${radius*0.5},${size*0.7} ${radius},${size}" fill="${bgColor}" stroke="#fff" stroke-width="2"/>
  

• 使用的时候直接调用函数，拿到返回的SVG字符串，传给你的地图库就行，比如：

  // 生成编号为7的默认大小标记
  const pin7 = generateNumberedMapPin(7);
  // 生成编号为12的自定义大小和颜色的标记
  const pin12 = generateNumberedMapPin(12, 35, "#2196f3", "#fff");
  

要是你的地图库真的只需要单独的path元素（不过不带文本的话没法显示编号哦），那你可以调整函数返回包含路径和文本的组合代码——不过一般地图库都是支持完整SVG字符串的，这个版本应该能满足你的需求。

备注：内容来源于stack exchange，提问作者Kenji776