如何在谷歌地图上应用圆形遮罩，使窗口仅显示圆形内的地图

Question

我知道Google Maps API允许您在地图上覆盖透明的圆圈，但我希望实际的地图元素本身在圆圈内呈现。你推荐的最干净的方法是什么？我认为API没有这个功能来重塑窗口。我需要通过CSS覆盖它吗？如有任何帮助，我们将不胜感激。

Answer 1

如果它只是一个圆圈，只需将iframe放在带有overflow:hidden的圆圈中。

.circle-wrapper {
width: 70vh;
height: 70vh;
overflow: hidden;
border-radius: 50%;
}
.circle-wrapper iframe {
width: 100%;
height: 100%;
}

这是代码笔https://codepen.io/phucbui/pen/YzrLaJY

Answer 2

您可以使用掩码：

将你的谷歌地图iframe包装在标签中，并在标签中添加掩码样式。

<div class="mask-tag"><iframe src=""></iframe></div>
.mask-tag {
/** use any image you would like */
mask-image: url(/img/theme/shape-heart.svg);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-image: url(/img/theme/shape-heart.svg);
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}