如何在Google Maps API中修改POI（餐厅、咖啡馆等）的默认标记颜色

Google Maps API 渲染的原生POI标记（餐厅、咖啡馆、公共设施等系统默认点位）与开发者手动添加的自定义标记属于完全独立的渲染层级，通过API内置的地图自定义样式能力即可统一调整原生POI的标记颜色，全程不会干扰自定义标记的显示与交互。

• 利用地图初始化参数中的styles配置项，直接在地图渲染阶段全局覆盖原生POI的图标样式，这种方式由地图引擎原生支持，性能开销极低，不需要手动遍历修改每个POI标记。
• 配置时通过匹配规则选中目标要素：featureType: "poi" 可以覆盖所有原生POI大类，elementType: "labels.icon" 可以精准锁定POI对应的图标标记部分，通过样式参数传入统一色值即可达成需求。

示例代码如下：

// 自定义地图样式配置
const mapStyle = [
  {
    // 匹配所有原生POI要素
    featureType: "poi",
    // 选中POI的图标标记元素（而非POI的文字标签）
    elementType: "labels.icon",
    stylers: [
      // 统一设置POI标记的基准颜色，可替换为项目需要的任意色值
      { color: "#3366cc" },
      // 可选：调整POI图标的视觉权重，避免和自定义标记产生视觉混淆
      { visibility: "on" }
    ]
  }
]

// 初始化地图实例时挂载自定义样式
const map = new google.maps.Map(document.getElementById("map-container"), {
  center: { lat: 39.9042, lng: 116.4074 },
  zoom: 12,
  // 传入自定义样式配置
  styles: mapStyle
})

• 该配置仅作用于地图原生渲染的基础POI，所有通过google.maps.Marker等API手动创建的自定义叠加层完全不受影响，可保留自定义标记原本的颜色、图标、交互逻辑。
• 如果需要灵活调整视觉层级，可以细化featureType的匹配粒度，比如针对poi.business、poi.attraction、poi.school等POI子类别单独配置样式，实现全局统一基础色、特定类别微调的效果。
• 样式调整不会破坏POI原有的交互能力，只要地图的clickableIcons属性保持开启，点击POI弹出详情、触发自定义点击回调的逻辑都可以正常运行。
• 需避免逐个监听POI渲染事件修改样式的实现方式：这种方案不仅性能差，还会因为POI随地图缩放、移动动态加载的特性出现漏改、样式闪烁的问题，全局样式配置是官方推荐的最优实现路径。

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