Javascript 如何创建谷歌地图图像遮罩覆盖？

我正在尝试创建一个谷歌地图“内部”形状，如下面的示例中所示。 你能帮帮我吗？

---

通常，您可以使用

剪辑路径

，该路径支持使用单独定义的剪辑源值。不幸的是，iFrame不支持这种样式设置方法。我建议获得一个svg，它与要覆盖到地图上的形状相反，然后将其绝对放置在地图的顶部，通过iframe嵌入。大概是这样的：

.main{
高度：100vh；
宽度：100vw；
显示：内联块；
位置：相对位置；
}
#覆盖层{
位置：绝对位置；
排名：0；
左：0；
z指数：1；
最小宽度：100vw；
最小高度：100vh；
背景图片：url(https://svgur.com/i/Fw8.svg);
背景重复：无重复；
背景尺寸：封面；
}
iframe{
位置：绝对位置；
宽度：100vw；
高度：100vh；
排名：0；
左：0；
z指数：0；
}

出身背景
第一层

阅读帮助部分可能会有所帮助。看见