好的谷歌地图实施黑白

时间:2017-11-11 00:37:30

标签: javascript html css google-maps

我在这个网站http://www.eduardoamaral.com.br/site/contato/

中看到了这个漂亮的谷歌地图嵌入式实施

我检查了代码,它似乎是一个框架,但我真的不能告诉它,任何人都可以帮我找到它是什么吗?

3 个答案:

答案 0 :(得分:1)

再次查看代码检查,查找显示//we define here the style of the map的行,该代码部分改变了Google地图的外观。

要进一步定制,您可以在此处查看这些网站:

https://snazzymaps.com/
https://mapstyle.withgoogle.com/

答案 1 :(得分:0)

我相信他们只是使用Google Maps API并调整渲染地图的样式。这是API的链接。 https://developers.google.com/maps/

您还可以深入了解他们正在进行的函数调用。进入开发人员开发人员工具(假设您使用的是Chrome,但在其他浏览器上也是如此)。然后在开发人员工具窗格的顶部栏中选择“源”。在开发人员工具窗格左侧的sources部分中找到索引文件。按显示代码部分底部的{}按钮。这将使代码可读。然后浏览它以查看与Google地图相关的内容。您也可以使用ctrl + f进行搜索。

我建议您只浏览Google Maps API网站。

答案 2 :(得分:0)

您可以在声明新地图时设置样式,时髦地图是Google地图配色方案的理想资源。

尝试以下操作,只需将this.refs.map替换为您正在使用的任何内容(来自here的颜色方案):

    var mapStyle =[
    {
        "featureType": "administrative.country",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#ededed"
            },
            {
                "gamma": "0.00"
            },
            {
                "lightness": "-100"
            },
            {
                "saturation": "-67"
            }
        ]
    },
    {
        "featureType": "administrative.locality",
        "elementType": "all",
        "stylers": [
            {
                "saturation": 7
            },
            {
                "lightness": 19
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "administrative.locality",
        "elementType": "labels.text",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "saturation": "-3"
            }
        ]
    },
    {
        "featureType": "administrative.locality",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "color": "#abb1c8"
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "all",
        "stylers": [
            {
                "hue": "#ffffff"
            },
            {
                "saturation": -100
            },
            {
                "lightness": 100
            },
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "landscape.man_made",
        "elementType": "geometry",
        "stylers": [
            {
                "lightness": "20"
            },
            {
                "saturation": "-26"
            },
            {
                "gamma": "2.33"
            },
            {
                "color": "#f5f5f5"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "all",
        "stylers": [
            {
                "hue": "#ff0000"
            },
            {
                "saturation": -100
            },
            {
                "lightness": 100
            },
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "color": "#ffffff"
            },
            {
                "lightness": "-19"
            }
        ]
    },
    {
        "featureType": "poi.medical",
        "elementType": "geometry",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "poi.school",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "geometry",
        "stylers": [
            {
                "saturation": "100"
            },
            {
                "lightness": 31
            },
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "labels",
        "stylers": [
            {
                "hue": "#008eff"
            },
            {
                "saturation": -93
            },
            {
                "lightness": 31
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "color": "#d2d1d1"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "labels.text.stroke",
        "stylers": [
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "lightness": "3"
            },
            {
                "color": "#ebebeb"
            },
            {
                "saturation": "-17"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "lightness": "-15"
            },
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "visibility": "simplified"
            },
            {
                "color": "#e8e8e8"
            },
            {
                "saturation": "0"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "labels",
        "stylers": [
            {
                "hue": "#bbc0c4"
            },
            {
                "saturation": -93
            },
            {
                "lightness": -2
            },
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "labels.text",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road.local",
        "elementType": "geometry",
        "stylers": [
            {
                "hue": "#4e00ff"
            },
            {
                "saturation": "-100"
            },
            {
                "lightness": "100"
            },
            {
                "visibility": "simplified"
            },
            {
                "weight": "1"
            }
        ]
    },
    {
        "featureType": "transit",
        "elementType": "all",
        "stylers": [
            {
                "hue": "#e9ebed"
            },
            {
                "saturation": 10
            },
            {
                "lightness": 69
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "transit.line",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#e7e7e7"
            }
        ]
    },
    {
        "featureType": "transit.station.bus",
        "elementType": "geometry",
        "stylers": [
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "transit.station.bus",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#ffffff"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "all",
        "stylers": [
            {
                "hue": "#e9ebed"
            },
            {
                "saturation": -78
            },
            {
                "lightness": 67
            },
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "lightness": "-3"
            }
        ]
    }
]
    var map = new google.maps.Map(this.refs.map,{
      center: center,
      zoom: 10,
      styles : mapStyle
    });