如何为Google Maps元素添加背景叠加层且不影响地图控件正常使用

当前实现中::after伪元素处于地图容器的上层DOM节点，默认会捕获所有点击、拖拽、缩放等交互事件，导致下层地图控件无法响应操作，可通过以下两种方案解决：

方案一：CSS快速修复（改动最小，推荐） #

只需要调整CSS样式，给叠加层添加事件透传属性即可，无需修改HTML和JS代码：

#maps {
  min-height: 100vh;
  height: 100%;
  /* 新增：让伪元素相对于地图容器定位 */
  position: relative;
}

#maps::after {
  background: linear-gradient(90deg, #f7f8fa 0%, rgba(247, 248, 250, 0) 18.73%),
    linear-gradient(180deg, #f7f8fa 0%, rgba(247, 248, 250, 0) 30.66%);
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* 新增：透传所有交互事件到下层 */
  pointer-events: none;
}

说明：pointer-events: none属性兼容性覆盖所有现代浏览器及移动端环境，完全满足常规业务需求。

方案二：Google Maps官方自定义叠加层（适合复杂叠加场景） #

如果后续需要在叠加层上添加交互元素，或者需要严格贴合地图缩放/平移逻辑，可以使用Google Maps原生的Custom Overlay API实现，叠加层会被插入到地图瓦片和控件之间，天然不会拦截控件交互：

// 初始化地图
const map = new google.maps.Map(document.getElementById("maps"), {
  center: val,
  zoom: 12,
  streetViewControl: false,      
});

// 自定义叠加层构造函数
function GradientOverlay(map) {
  this.bounds_ = new google.maps.LatLngBounds(
    map.getBounds().getSouthWest(),
    map.getBounds().getNorthEast()
  );
  this.map_ = map;
  this.div_ = null;
  this.setMap(map);
}

// 继承google.maps.OverlayView
GradientOverlay.prototype = new google.maps.OverlayView();

// 初始化叠加层DOM
GradientOverlay.prototype.onAdd = function() {
  const div = document.createElement('div');
  div.style.position = 'absolute';
  div.style.width = '100%';
  div.style.height = '100%';
  div.style.background = 'linear-gradient(90deg, #f7f8fa 0%, rgba(247, 248, 250, 0) 18.73%), linear-gradient(180deg, #f7f8fa 0%, rgba(247, 248, 250, 0) 30.66%)';
  this.div_ = div;
  // 把叠加层添加到地图的overlayLayer pane，该层级位于地图瓦片之上、控件之下
  const panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
};

// 绘制叠加层
GradientOverlay.prototype.draw = function() {
  const overlayProjection = this.getProjection();
  const sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  const ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
  const div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';
};

// 移除叠加层时的清理逻辑
GradientOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
};

// 实例化叠加层
new GradientOverlay(map);

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