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

通过rights制作黑白Google地图的唯一方法是使用他们的Styled Maps api

您的帖子已使用API标记，因此我假设您可以使用非iframe选项。如果包含方法没有修复，这可能会让您了解替代方法。也可以使用样式化地图生成Google Static Map，然后iFrame友好。

您还可以查看基于Open Street Maps的Stamen maps，但可以用作Google地图的叠加图层。只有通过精心设计的iframe网址，才有可能实现交付形式。

Answer 3

在<div>周围添加<iframe>并将其设置为：

webkit-filter: grayscale(100%);

Answer 4

尝试使用

<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 5

这是通过使用一些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 6

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

制作iframe谷歌地图黑色和白色

6 个答案: