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

Question

我正试图在下面的例子中创建一个"内部"形状的谷歌地图。你能帮帮我吗？点击查看图像

Answer 1

通常，您可以使用clip-pathcss属性，该属性支持使用单独定义的剪辑源值。不幸的是，Iframes不支持这种造型方法。我建议获得一个svg，它是你想要覆盖在地图上的形状的逆，然后将其绝对定位在地图的顶部，通过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>

CodePen上此代码版本的附加链接。