如何修改Google Maps中Toggle fullscreen view按钮的颜色

嘿，我来帮你搞定修改Google Maps全屏按钮颜色的事儿！下面分两种实用方法，你可以根据自己的场景灵活选择：

方法一：直接用CSS覆盖默认样式（快速简单） #

Google Maps的全屏按钮自带特定的CSS类，咱们可以通过定位这些类来改颜色。步骤很简单：

1. 打开你的页面，加载好Google Maps后，按F12调出开发者工具，找到全屏按钮的DOM元素，看看它的类名（通常是gm-fullscreen-control，不同API版本可能略有差异，以实际查看的为准）。
2. 在你的自定义CSS文件里添加以下样式：

/* 修改按钮背景色 */
.gm-fullscreen-control {
  background-color: #2196F3 !important; /* 把这里换成你想要的颜色值 */
}

/* 修改按钮上的图标颜色，这里用滤镜转成白色，你可以调整参数改其他颜色 */
.gm-fullscreen-control img {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

小贴士：加!important是为了确保咱们的样式能盖过Google Maps的默认样式。要是以后突然失效了，记得去检查下Google有没有更新控件的类名~

方法二：自定义全屏控件（更稳定可靠） #

要是担心Google哪天改了默认控件的类名导致样式失效，咱们可以自己做一个全屏按钮，完全掌控样式：

1. 先把默认的全屏按钮隐藏掉：

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
    fullscreenControl: false // 关掉默认的全屏按钮
  });
  // 下面加自定义按钮的代码
}

2. 然后创建自己的按钮并添加到地图上：

// 先做一个按钮元素
const customFullscreenBtn = document.createElement('button');
customFullscreenBtn.innerHTML = '<svg>...</svg>'; // 这里可以放你自己的全屏图标，或者直接写文字“全屏”
customFullscreenBtn.style.backgroundColor = '#FF5722'; // 背景色自己定
customFullscreenBtn.style.color = '#fff'; // 文字/图标颜色
customFullscreenBtn.style.border = 'none';
customFullscreenBtn.style.padding = '8px 12px';
customFullscreenBtn.style.borderRadius = '4px';
customFullscreenBtn.style.cursor = 'pointer';
customFullscreenBtn.style.margin = '10px'; // 和其他控件保持一致的间距

// 给按钮加全屏切换的逻辑
customFullscreenBtn.addEventListener('click', () => {
  const mapContainer = document.getElementById('map');
  if (!document.fullscreenElement) {
    // 进入全屏
    mapContainer.requestFullscreen().catch(err => {
      console.log(`进入全屏失败: ${err.message}`);
    });
  } else {
    // 退出全屏
    document.exitFullscreen();
  }
});

// 把按钮放到地图的右上角，和默认全屏按钮位置一样
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(customFullscreenBtn);

这样不管Google怎么改默认控件，咱们自己的按钮样式都不会受影响。

额外提醒 #

• 如果你是用iframe嵌入的Google Maps（Embed API），因为浏览器的同源策略，没法直接修改iframe里的样式。这种情况要么把按钮放在iframe上方覆盖，要么换成JavaScript API来实现。
• 测试的时候注意下不同浏览器的兼容性，不过现在主流浏览器都支持标准的全屏API啦~

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