Vue2中Google Maps 3.54同时启用Advanced Markers与传统样式问题

问题核心 #

使用Google Maps 3.54版本（依赖mapId启用Advanced Markers）时，出现互斥问题：

• 保留mapId：Advanced Markers正常显示，但代码配置的自定义地图样式完全不生效
• 移除mapId：自定义样式生效，但Advanced Markers失效

原因分析 #

当指定mapId时，Google Maps会优先加载Google Cloud控制台中该mapId关联的官方配置样式，直接覆盖代码中通过styles参数或StyledMapType定义的自定义样式。这是因为mapId绑定的是Google Cloud端管理的矢量地图样式体系，优先级高于本地代码配置。

解决方案 #

方案1：在Google Cloud控制台配置对应mapId的样式 #

这是最直接的兼容方式，既能保留mapId（保证Advanced Markers正常工作），又能实现自定义样式：

1. 登录Google Cloud控制台，找到你的地图ID（GMAP_ID）对应的资源
2. 进入「样式编辑器」，添加或修改样式规则（比如设置水域颜色为#f40000）
3. 保存配置后，地图加载时会自动应用该样式，无需在代码中额外设置styles

方案2：清空控制台mapId样式，用代码控制样式 #

如果需要在代码中动态调整样式，可按以下步骤操作：

1. 登录Google Cloud控制台，将GMAP_ID对应的地图样式重置为默认（删除所有自定义规则）
2. 在代码中保留mapId，并通过StyledMapType设置自定义样式：

// 初始化地图时保留mapId
this.map = new google.maps.Map(document.getElementById('map'), {
  mapId: 'GMAP_ID',
  language: this.$i18n.locale,
  center: this.defaultCoords,
  zoom: this.zoom
})

// 创建自定义样式并应用
const styledMapType = new google.maps.StyledMapType(
  [
    {
      featureType: 'water',
      elementType: 'all',
      stylers: [
        { color: '#f40000' },
        { visibility: 'on' }
      ]
    }
  ],
  { name: 'Custom Water Style' } // 必须指定样式名称，否则可能无法正常切换
)
this.map.mapTypes.set('styled_map', styledMapType)
this.map.setMapTypeId('styled_map')

或者直接在初始化时配置styles参数（前提是控制台mapId无自定义样式）：

this.map = new google.maps.Map(document.getElementById('map'), {
  mapId: 'GMAP_ID',
  language: this.$i18n.locale,
  center: this.defaultCoords,
  zoom: this.zoom,
  styles: [
    {
      featureType: 'water',
      elementType: 'all',
      stylers: [
        { color: '#f40000' },
        { visibility: 'on' }
      ]
    }
  ]
})

关键注意点 #

• Advanced Markers依赖mapId绑定的矢量地图体系，因此必须保留mapId参数
• 若控制台和代码同时配置样式，控制台的配置优先级更高，代码样式会被忽略

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