如何在Google Map默认标准标记上添加自定义字母

嘿，我刚好折腾过这个需求！给Google Maps的默认标记加上指定字母，有几种实用的实现方式，我给你一步步说清楚：

Google Maps JavaScript API其实自带了label属性，不用额外折腾就能给标记加文字，亲测有效！

你只需要在创建Marker的时候，添加label配置项，就能指定要显示的字母，还能调整字体、颜色、位置这些：

// 初始化地图
const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 12,
  center: { lat: 40.7128, lng: -74.0060 }, // 纽约坐标示例
});

// 创建带字母的标记
const marker = new google.maps.Marker({
  position: { lat: 40.7128, lng: -74.0060 },
  map: map,
  label: {
    text: "A", // 你要显示的字母
    color: "white", // 文字颜色
    fontSize: "14px",
    fontWeight: "bold",
    // 可以用offset调整位置，比如默认可能有点偏，微调一下
    offset: new google.maps.Size(0, 3),
  },
  // 保留默认标记样式，不用改icon
});

这个方法的好处是完全复用默认标记的样式，只是叠加文字，代码量极少，适合快速实现。

如果觉得label的位置或者样式不够灵活，你可以用SVG生成一个和默认标记几乎一样，但内嵌字母的图标，然后把SVG转成Data URI作为marker的icon：

// 生成带字母的SVG（这里模拟默认红色标记）
function getCustomMarkerWithLetter(letter) {
  const svg = `
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="40" viewBox="0 0 32 40">
      <!-- 模拟默认标记的红色背景 -->
      <path d="M16 0C7.16 0 0 7.16 0 16c0 10.56 16 24 16 24s16-13.44 16-24C32 7.16 24.84 0 16 0z" fill="#EA4335"/>
      <!-- 标记的白色边框 -->
      <path d="M16 0c8.84 0 16 7.16 16 16 0 10.56-16 24-16 24S0 26.56 0 16C0 7.16 7.16 0 16 0z" fill="none" stroke="#FFFFFF" stroke-width="2"/>
      <!-- 要显示的字母 -->
      <text x="16" y="19" text-anchor="middle" fill="white" font-size="16" font-weight="bold">${letter}</text>
    </svg>
  `;
  // 转成Data URI
  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
}

// 创建标记
const marker = new google.maps.Marker({
  position: { lat: 40.7128, lng: -74.0060 },
  map: map,
  icon: getCustomMarkerWithLetter("B"), // 传入你的字母
});

这种方法可以完全控制标记的样式，比如修改标记颜色、字母大小、位置，甚至加阴影效果，灵活性拉满。

如果你的设计要求特别复杂（比如渐变、特殊字体），可以提前用设计工具（比如Figma、Photoshop）做好带不同字母的标记图片，然后直接设置marker的icon为图片路径：

const marker = new google.maps.Marker({
  position: { lat: 40.7128, lng: -74.0060 },
  map: map,
  icon: {
    url: "/path/to/your/marker-C.png", // 你的图片路径
    scaledSize: new google.maps.Size(32, 40), // 调整显示尺寸
  },
});

这个方法的缺点是需要提前准备所有需要的字母图片，维护成本高，但适合样式要求极高的场景。

内容的提问来源于stack exchange，提问作者Anton Turchenko