css - 跨浏览器灰度不工作

Question

所以我有这张谷歌地图，它需要有黑白效果，它适用于以下 chrome、edge 和 firefox，但 safari 和 ie 不行。

最初我的 css 看起来像下面这样，我环顾四周，人们说唯一真正有效的解决方案是 filter: url('....') 但对我来说它不起作用。任何有解决方案的人都将不胜感激。 p.s 我宁愿如果这是用 css 完成的，有人说它可以用 api 完成我宁愿不走那条路。

#LocationMap {
width: 100%;
height: 400px;
float: left;
filter: url(data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter i…0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale);
filter: gray;
-webkit-filter: grayscale(100%);
-webkit-transition: all .6s ease;
-webkit-backface-visibility: hidden;
box-shadow: inset 0px 0px 0 2000px rgba(0,0,0,0.5);
}

Answer 1

您可以使用样式化的 map ，这里是实现信息: https://developers.google.com/maps/documentation/javascript/styling

如果需要，您可以在这里找到大量现成的样式: https://snazzymaps.com/