我需要向 Google Maps 元素添加一些背景疊加效果。但是，添加疊加層后，地圖控制元件不起作用，因為疊加層位于地圖元素的頂部。有什么方法可以在不影響地圖控制元件的情況下實作這一點。
<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,
});
效果將類似于下圖。
我需要在不干擾地圖控制元件的情況下實作相同的地圖效果。有什么辦法嗎？
uj5u.com熱心網友回復：
添加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
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/313496.html
標籤：javascript css 反应 Vue.js 谷歌地图