我正在尝试在示例下方创建一个“内部”形状的google map。 请你帮助我好吗？ Click to see Image
aishenghuo2009 回答：如何创建Google Map图像蒙版叠加层？
通常，您可以使用clip-path css property，它支持使用单独定义的剪辑源值。不幸的是，iframe不支持这种样式方法。我建议您获取一个svg，该svg是要叠加到地图上的形状的 inverse ，然后通过iframe将其绝对放置在地图上。像这样：
.main {
height: 100vh;
width: 100vw;
display: inline-block;
position: relative;
}
#overlay {
position: absolute;
top: 0;
left: 0;
z-index: 1;
min-width: 100vw;
min-height: 100vh;
background-image: url(https://svgur.com/i/Fw8.svg);
background-repeat: no-repeat;
background-size: cover;
}
iframe {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index: 0;
}<div class="main">
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d41290.17039912266!2d-87.72447812127052!3d41.91184942751453!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1572901622073!5m2!1sen!2sus" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</div>
<div id="overlay"></div>
</div>
<!-- externally hosted svg looks like this: -->
<svg id="mask" width="580" height="400" xmlns="http://www.w3.org/2000/svg">
<g>
<title>background</title>
<rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1" />
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%" />
</g>
</g>
<g>
<title>Layer 1</title>
<path id="svg_1" d="m294.37485,-50.25167c-134.48292,0 -243.50004,109.0171 -243.50004,243.5c0,134.4829 109.01712,243.5 243.50004,243.5c134.48292,0 243.50004,-109.0171 243.50004,-243.5c0,-134.4829 -109.01712,-243.5 -243.50004,-243.5zm140.49755,226.21006c-24.30979,27.96212 -62.08966,37.21023 -95.24547,26.57156l-120.42647,138.48706c-12.83343,14.74336 -35.16627,16.2512 -49.90963,3.43453s-16.30147,-35.16626 -3.48479,-49.90963l120.59401,-138.63785c-14.96116,-31.24587 -11.00726,-69.7629 13.18526,-97.57424c22.90247,-26.38726 57.85095,-36.03746 89.59944,-28.04589l-46.14002,53.81326l15.09519,43.91176l45.6039,8.86277l46.2573,-53.9473c12.53186,30.39143 7.92456,66.54617 -15.1287,93.03395z"
stroke-width="1.5" fill="#000" />
<rect id="svg_2" height="525" width="198" y="-61.54688" x="-49.5" stroke-width="1.5" fill="#000" />
<rect id="svg_3" height="119" width="174" y="382.45313" x="96.5" stroke-width="1.5" fill="#000" />
<rect id="svg_4" height="540" width="261" y="-53.54688" x="505.5" stroke-width="1.5" fill="#000" />
<rect id="svg_5" height="191" width="289" y="307.45313" x="344.5" stroke-width="1.5" fill="#000" />
<rect id="svg_6" height="141" width="120" y="-62.54688" x="458.5" stroke-width="1.5" fill="#000" />
<rect id="svg_7" height="38" width="76" y="-15.54688" x="413.5" stroke-width="1.5" fill="#000" />
</g>
</svg>