google-maps - 将 iframe 谷歌地图设为黑白

Question

我在 iframe 中使用了谷歌地图。

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.in/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Madurai,+Tamil+Nadu&amp;aq=0&amp;oq=madursi&amp;sll=10.782836,78.288503&amp;sspn=5.674603,10.755615&amp;ie=UTF8&amp;hq=&amp;hnear=Madurai,+Tamil+Nadu&amp;t=m&amp;z=12&amp;ll=9.925201,78.119775&amp;output=embed"></iframe><br /><small><a href="https://maps.google.co.in/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Madurai,+Tamil+Nadu&amp;aq=0&amp;oq=madursi&amp;sll=10.782836,78.288503&amp;sspn=5.674603,10.755615&amp;ie=UTF8&amp;hq=&amp;hnear=Madurai,+Tamil+Nadu&amp;t=m&amp;z=12&amp;ll=9.925201,78.119775" style="color:#0000FF;text-align:left">View Larger Map</a></small>

如何以黑白显示谷歌地图？

Answer 1

它确实有效，但您还应该添加不同浏览器所需的灰度格式。

<div style="-webkit-filter: grayscale(100%); filter: grayscale(100%);">

这是小提琴：http: //jsfiddle.net/j9p9w62f/

Answer 2

按权利，制作黑白谷歌地图的唯一方法是使用他们的Styled Maps api

您的帖子被标记为 API，所以我认为非 iframe 选项对您来说是可以的。如果包含方法不固定，这可能会给你一个替代的想法。也可以使用样式化的地图来生成一个谷歌静态地图，这也是 iFrame 友好的。

您还可以查看基于 Open Street Maps 的Stamen maps，但可以用作 Google Maps 的叠加层。仅通过精心设计的 iframe url 不可能实现交付形式。

Answer 3

尝试使用

<iframe class="map" width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps(...)"></iframe>

.map {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
         filter: grayscale(100%);
}

这将有助于

Answer 4

这是通过使用一些 css 来实现的

这是工作代码

.map {
         filter: grayscale(100%);         
}

<iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4917.1193047590605!2d4.4690507720313!3d51.96022102967837!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c5cb67ae23c02d%3A0xdac4c06bc7904d2!2sRododendronplein+10%2C+3053+ES+Rotterdam%2C+Nederland!5e0!3m2!1snl!2ses!4v1541007683407" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Answer 5

Add a <div> arround the <iframe> and stle it as:

webkit-filter: grayscale(100%);

Answer 6

您是否尝试过https://mapstyle.withgoogle.com/？您可以根据需要对其进行配置，并准备好在您的代码中使用的 url 或 json。