@angular/google-maps无法设置className自定义MarkerLabel，如何为标记标签文本加白边

当前@angular/google-maps封装层仅开放color、fontFamily、fontSize、fontWeight、text五个MarkerLabel配置项，未开放className自定义类入口，可通过以下两种方案实现文本白色描边效果：

方案1：Canvas预生成带描边的文本作为Marker图标 #

该方案无样式污染风险，适配所有场景，不需要依赖Google Maps底层DOM结构：

• 编写Canvas工具函数，绘制带有白色描边的自定义文本，导出为图片DataURL
• 将生成的图片作为icon参数传入Marker组件，替代默认的MarkerLabel配置

代码示例 #

// 工具函数：生成带描边的文本Marker图标
function generateTextMarkerIcon(
  text: string, 
  textColor: string = '#ff0000',
  fontSize: number = 14,
  fontFamily: string = 'Arial'
): google.maps.Icon {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d')!;
  
  // 预计算文本尺寸
  ctx.font = `${fontSize}px ${fontFamily}`;
  const textMetrics = ctx.measureText(text);
  // 预留描边宽度的画布空间
  canvas.width = textMetrics.width + 4;
  canvas.height = fontSize + 4;

  // 重置画布后重新配置样式
  ctx.font = `${fontSize}px ${fontFamily}`;
  ctx.textBaseline = 'top';
  // 先绘制白色描边
  ctx.strokeStyle = 'white';
  ctx.lineWidth = 2;
  ctx.strokeText(text, 2, 2);
  // 再绘制文本填充色
  ctx.fillStyle = textColor;
  ctx.fillText(text, 2, 2);

  return {
    url: canvas.toDataURL('image/png'),
    // 调整锚点，保证图标定位和原生MarkerLabel一致
    anchor: new google.maps.Point(canvas.width / 2, canvas.height)
  }
}

// 组件内调用
const markerOptions: google.maps.MarkerOptions = {
  position: { lat: 39.9042, lng: 116.4074 },
  icon: generateTextMarkerIcon('北京', '#2563eb', 16, 'Microsoft Yahei')
}

方案2：CSS样式穿透修改默认MarkerLabel样式 #

该方案代码量少，不需要额外生成图片，适合对样式复用要求不高的场景：

• Google Maps渲染的MarkerLabelDOM统一带有.gm-marker-label类名，即使@angular/google-maps没有开放自定义类配置，也可以通过全局样式或者Angular样式穿透修改该类的文本描边属性

代码示例 #

1. 全局样式适配（推荐，无语法兼容问题）

/* 全局styles.css文件，可加父类限定作用范围避免全局污染 */
.custom-map-container .gm-marker-label {
  -webkit-text-stroke: 1px white;
  text-stroke: 1px white;
  /* 可选：添加阴影强化描边效果 */
  text-shadow: 0 0 2px rgba(0,0,0,0.6);
}

2. 组件内样式穿透

/* 对应地图组件的样式文件 */
::ng-deep .gm-marker-label {
  -webkit-text-stroke: 1px white;
  text-stroke: 1px white;
}

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