谷歌地图：hybrid类型地图隐藏POI并使用AdvancedMarker的方案

使用Google Maps JavaScript API的hybrid类型地图时，需要隐藏兴趣点（PoI）标记。已在云地图管理后台配置了隐藏PoI的roadmap样式，应用到hybrid地图时PoI仍可见，切换为roadmap类型则正常隐藏；该功能在google.maps 3.60版本前可正常使用。

地图初始化代码片段：

const mapElement = document.getElementById("google-maps-container");

if (!mapElement) {
  console.error("Map element not found");
  return;
}

const map = new google.maps.Map(mapElement, {
  mapId: "*map ID*",
  mapTypeId: "hybrid",
  // 其他配置项
});

核心矛盾：

• 官方文档明确云地图样式仅作用于roadmap类型，创建样式时无法选择hybrid类型
• 不使用mapId时，可通过代码定义样式隐藏PoI，但无法使用非弃用的AdvancedMarker组件
• 设置mapId后，代码内定义的样式会被云样式覆盖

通过自定义StyledMapType替换默认的hybrid地图类型，既能保留mapId以使用AdvancedMarker，又能隐藏hybrid地图上的PoI。

原理：hybrid地图是卫星图层叠加roadmap图层的组合，通过StyledMapType可以针对hybrid的叠加图层设置样式规则，覆盖默认的PoI显示，同时云样式的mapId依然有效（用于支持AdvancedMarker及roadmap的样式配置）。

具体实现步骤 #

1. 定义隐藏PoI的样式规则
2. 创建自定义的hybrid地图类型并应用样式
3. 将自定义地图类型替换默认的hybrid类型

完整代码示例 #

const mapElement = document.getElementById("google-maps-container");

if (!mapElement) {
  console.error("Map element not found");
  return;
}

// 定义隐藏PoI的样式规则：隐藏PoI的标签和几何图形
const hidePOIStyles = [
  {
    featureType: "poi",
    elementType: "labels",
    stylers: [{ visibility: "off" }]
  },
  {
    featureType: "poi",
    elementType: "geometry",
    stylers: [{ visibility: "off" }]
  }
];

// 创建自定义的hybrid地图类型
const customHybrid = new google.maps.StyledMapType(
  hidePOIStyles,
  { name: "Custom Hybrid" }
);

// 初始化地图（保留mapId）
const map = new google.maps.Map(mapElement, {
  mapId: "*map ID*",
  mapTypeId: "hybrid",
  // 其他配置：比如center、zoom等
});

// 替换默认的hybrid地图类型为自定义版本
map.mapTypes.set("hybrid", customHybrid);

// 此时可以正常使用AdvancedMarker
const marker = new google.maps.marker.AdvancedMarkerElement({
  map: map,
  position: { lat: 40.7128, lng: -74.0060 }, // 示例坐标
  title: "示例标记"
});

说明 #

• 该方法不会影响云样式对roadmap类型的作用，切换回roadmap时仍会使用你配置的隐藏PoI样式
• 自定义StyledMapType仅针对hybrid类型生效，完美适配你需要的场景
• 保留了mapId，因此可以正常使用所有非弃用的组件（包括AdvancedMarker）

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