将Google Maps JS API ImageMapType裁剪为多边形
将Google Maps JS API ImageMapType裁剪为多边形
提问于 2014-06-20 00:11:25
如何将Google Maps中的MapType裁剪为任意多边形。例如，如果我有一个覆盖大范围(即全世界)的自定义ImageMapType，但我只想在给定的多边形(即一个国家)内显示它。
有没有一种方法可以将ImageMapType裁剪到给定的多边形，或者实现自定义的MapType来实现此行为？它应该允许正常缩放和平移。
地图的其余部分应该保持不变，并且将有一个仅覆盖特定区域的MapType。因此，简单地覆盖多边形以覆盖多边形外部的区域以显示所需内容是不可能的。
如下所示：
服务器端裁剪不是一个选项。
回答 4
Stack Overflow用户
发布于 2016-02-10 20:07:56
Stack Overflow用户
发布于 2015-08-29 23:37:58
我发现你不能使用普通的掩码策略，因为你需要能够看到较低的层。我可以推荐SVG更完整的剪辑套件吗？See here。
浏览器的兼容性很好，但不是很好，但你完全可以完成你在这里尝试的东西(除非你需要平移/缩放地图，否则你就完蛋了，直到地图实现了这样的事情)。
Stack Overflow用户
发布于 2016-03-29 20:48:08
您可以使用一个svg剪辑路径，并结合foreignobject标记，将一个html文档放入svg中，然后将其裁剪成所需的形状，如以下代码摘自codepen.io/yoksel/pen/oggRwR：
@import url(http://fonts.googleapis.com/css?family=Arvo:700);
.svg {
display: block;
width: 853px;
height: 480px;
margin: 2em auto;
}
text {
font: bold 5.3em/1 Arvo, Arial sans-serif;
}<svg class="svg">
<clippath id="cp-circle">
<circle r="180" cx="50%" cy="42%"></circle>
<text
text-anchor="middle"
x="50%"
y="98%"
>Soldier Of Fortune</text>
</clippath>
<g clip-path="url(#cp-circle)">
<foreignObject width="853" x="0"
y="0" height="480">
<body xmlns="http://www.w3.org/1999/xhtml">
<iframe width="853" height="480" src="//www.youtube.com/embed/RKrNdxiBW3Y" frameborder="0" allowfullscreen></iframe>
</body>
</foreignObject>
</g>
</svg>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24311350
复制相关文章
相似问题