在谷歌地图元素上添加背景叠加效果答案

【问题标题】：Add a background overlay effect on Google Maps element在谷歌地图元素上添加背景叠加效果
【发布时间】：2021-10-11 05:42:16
【问题描述】：

我需要为 Google 地图元素添加一些背景叠加效果。但是，添加覆盖后，地图控件无法正常工作，因为覆盖位于地图元素的顶部。有什么方法可以实现这一点不影响地图控件。

<div id="maps"></div>

#maps {
  min-height: 100vh;
  height: 100%;
}

#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;
}

脚本

new google.maps.Map(document.getElementById("maps"), {
        center: val,
        zoom: 12,
        streetViewControl: false,      
      });

效果类似于下图。

我需要在不干扰地图控件的情况下实现相同的地图效果。有什么办法吗？

【问题讨论】：

如果叠加层仅用于视觉目的并且不应该是可交互的，那么您可以使用pointer-events: none。

标签： javascript css reactjs vue.js google-maps

【解决方案1】：

添加pointer-events: none ，问题解决。

#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; 
}

致谢：@Terry

【讨论】：

none 之后的句号/句号是不必要的！
这是一个错字，已更正。 @ProfessorAbronsius