自定义Google Maps缩放按钮图标遇阻，CSS修改图标失效求助

API 探路者

2026-7-10

自定义Google Maps缩放按钮样式（蓝色背景+白色加减图标）

问题分析

你当前的CSS仅修改了按钮背景，但图标未替换的核心原因是：Google Maps缩放按钮内的<img>是自带的内嵌图标资源，直接给它添加background属性只会在原图标下方叠加背景，无法覆盖或替换掉原图标。

最优解决方案

通过隐藏默认图标，利用CSS伪元素生成白色加减符号，同时统一按钮样式，代码如下：

/* 定位缩放按钮容器，调整位置可选 */
.gmnoprint .gm-style-mtc {
  top: 10px !important;
  right: 10px !important;
}

/* 单个缩放按钮基础样式 */
.gmnoprint .gm-style-mtc button {
  background-color: #0071E3 !important;
  border-radius: 50% !important;
  margin-bottom: 10px !important;
  height: 40px !important;
  width: 40px !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* 隐藏默认的img图标 */
.gmnoprint .gm-style-mtc button img {
  display: none !important;
}

/* 放大按钮（+） */
.gmnoprint .gm-style-mtc button:first-child::before {
  content: "+";
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}

/* 缩小按钮（-） */
.gmnoprint .gm-style-mtc button:last-child::before {
  content: "-";
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}

/* 可选：按钮hover效果 */
.gmnoprint .gm-style-mtc button:hover {
  background-color: #0077ED !important;
}