Google Maps JS API PinElement glyph属性弃用，寻求可行替代方案

方法1：直接用AdvancedMarkerElement自定义标记内容 #

既然PinElement的glyph属性已弃用且不支持传入DOM元素，你可以跳过PinElement，直接通过AdvancedMarkerElement的content属性定义完整的自定义标记结构，完全保留原有Font Awesome图标的用法：

// 构建自定义标记容器
const customMarker = document.createElement('div');
customMarker.style.width = '32px';
customMarker.style.height = '32px';
customMarker.style.borderRadius = '50%';
customMarker.style.backgroundColor = color; // 对应原代码的background颜色
customMarker.style.border = `2px solid ${glyphColor}`; // 对应原代码的borderColor
customMarker.style.display = 'flex';
customMarker.style.justifyContent = 'center';
customMarker.style.alignItems = 'center';

// 添加Font Awesome图标
const glyph = document.createElement('i');
glyph.className = 'fa fa-shopping-basket fa-lg';
glyph.style.color = glyphColor; // 对应原代码的glyphColor
customMarker.appendChild(glyph);

// 创建高级标记
const marker = new google.maps.marker.AdvancedMarkerElement({
  position: yourMarkerPosition, // 替换为你的标记位置
  map: yourMapInstance, // 替换为你的地图实例
  content: customMarker
});

方法2：转SVG URL适配PinElement的glyphSrc #

如果想继续使用PinElement的默认样式，可以把Font Awesome图标转为SVG字符串，再转成Data URL传入glyphSrc：

// 替换为对应Font Awesome图标的SVG代码，fill值设为你的glyphColor
const svgGlyph = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="${glyphColor}">
  <path d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/>
</svg>
`;
// 转为Data URL
const glyphSrc = `data:image/svg+xml;base64,${btoa(svgGlyph)}`;

// 创建PinElement
const pinEl = new google.maps.marker.PinElement({
  background: color,
  glyphSrc: glyphSrc,
  borderColor: glyphColor
});

// 创建高级标记
const marker = new google.maps.marker.AdvancedMarkerElement({
  position: yourMarkerPosition,
  map: yourMapInstance,
  content: pinEl.element
});

说明 #

• 方法1的优势是完全自定义，不受PinElement限制，能保留原有DOM结构和Font Awesome的动态修改能力。
• 方法2适合想复用PinElement默认样式的场景，但需要手动处理SVG代码，灵活性稍弱。

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