CSS 隐藏高德地图、百度地图、腾讯地图的 Logo

注意：以下方法适用于某些特定场景，但可能因各家地图的版本更新而失效，另外仅供个人学习和测试，勿用作商业用途。

高德地图 - AMap

.amap-logo{display:none;opacity:0}      // 隐藏高德地图的LOGO
.amap-copyright{display:none;opacity:0} // 隐藏高德地图的版权信息：

在 React 等框架中，可能需要使用 :global 选择器来确保样式的全局应用：

:global .amap-logo {
  display: none !important;
}
:global .amap-copyright {
  display: none !important;
}

百度地图 - Baidu Map

.BMap_cpyCtrl {
  display: none; /* 隐藏版权信息 */
}
.anchorBL {
  display: none; /* 隐藏LOGO */
}

将上述 CSS 代码添加到你的页面样式中即可，如果需要更彻底地隐藏所有相关元素，也可以使用以下扩展样式：

.anchorBL a, .anchorBL img, .anchorBL span {
  display: none !important; /* 隐藏所有相关元素 */
}

腾讯地图 - Tencent Map

a .csssprite {
  display: none;
}

也可以在腾讯地图加载完成后，通过 JavaScript 操作 DOM 来隐藏 Logo：

var logoElement = document.querySelector('canvas+div:last-child');
if (logoElement) {
  logoElement.style.display = 'none';
}

MapBox

// Mapbox 左下角的 Log
.mapboxgl-ctrl-bottom-left div {
  display: none !important;
}

// 如果地图左下角有多个控件，而 Logo 不是第一个控件，
// 可以通过更具体的样式选择器来隐藏
.mapboxgl-ctrl-bottom-left > div:last-child {
  display: none !important;
}

或者使用 JavaScript 动态隐藏 Mapbox 的 logo，避免页面加载时的闪烁：

let logoDom = document.querySelector(".mapboxgl-ctrl-bottom-left").children[0];
logoDom.style.display = "none";

高德地图、百度地图、腾讯地图、MapBox 等地图扩展阅读：

• CSS 盒模型
• CSS 隐藏高德地图、百度地图、腾讯地图的 Logo
• nmap 命令