Google Maps API地图类型控件：禁用复选框并固定显示状态

嘿，我刚好处理过类似的需求，这就教你怎么搞定Google Maps API里的这个控件问题！你想要的效果是：只保留Map和Satellite的切换按钮，同时隐藏掉它们各自的复选框（卫星图的labels、地图的terrain），并且固定卫星图默认带标签、地图默认不带地形对吧？

核心思路很简单：我们不用原生的Satellite（纯卫星无标签）和带Terrain选项的Map，而是直接用**带标签的卫星图类型（HYBRID）和普通道路地图类型（ROADMAP）**来替换，然后配置地图类型控件只显示这两个类型，这样就不会出现任何复选框了。

具体代码实现 #

function initMap() {
  // 初始化地图，设置中心坐标和缩放级别
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 }, // 示例坐标，替换成你的目标位置
    zoom: 8,
    // 开启地图类型控件
    mapTypeControl: true,
    // 配置控件选项
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, // 控件样式，可选其他样式
      // 只显示我们需要的两个地图类型
      mapTypeId: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID]
    },
    // 默认显示带标签的卫星图（如果想默认显示普通地图，改成ROADMAP即可）
    mapTypeId: google.maps.MapTypeId.HYBRID
  });
}

关键细节解释 #

• google.maps.MapTypeId.HYBRID：这个类型本身就是卫星图+标签的组合，完全替代了原生Satellite加labels复选框的状态，所以不需要额外的复选框来切换标签显示
• google.maps.MapTypeId.ROADMAP：这是Google Maps默认的普通道路地图，本身就不带地形层，刚好对应你想要的“Map默认关闭terrain”的需求
• 通过mapTypeControlOptions.mapTypeId指定只显示这两个类型，控件只会出现两个切换按钮，不会有任何复选框——因为这两个都是独立的地图类型，没有子选项可以切换

这样配置后，用户点击控件里的选项，就只会在普通道路地图和带标签的卫星图之间切换，完全符合你的需求啦！

内容的提问来源于stack exchange，提问作者Med Karim Garali