在 Google 地图元素上添加背景叠加效果

Question

我需要向 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,      
      });

效果类似于下图。

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

Answer 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

在 Google 地图元素上添加背景叠加效果

Add a background overlay effect on Google Maps element

javascript

css

google-maps

reactjs

vue.js