Javascript 漂亮的谷歌地图实现黑白
我在这个网站上看到了这个不错的谷歌地图嵌入实现Javascript 漂亮的谷歌地图实现黑白,javascript,html,css,google-maps,Javascript,Html,Css,Google Maps,我在这个网站上看到了这个不错的谷歌地图嵌入实现 我检查了代码，它似乎是一个框架，但我真的说不出来，有人能帮我找到它是什么吗？我相信他们只是在使用谷歌地图API并调整渲染地图的样式。这里是API的链接 您还可以深入了解他们正在进行的函数调用。进入开发者工具（假设您使用的是Chrome，但在其他浏览器上也类似）。然后在“开发人员工具”窗格的顶部栏上选择源。在“开发人员工具”窗格左侧的“源”部分中找到索引文件。按下显示代码部分底部的{}按钮。这将使代码可读。然后通过它查看与谷歌地图相关的内容。您也可以
我检查了代码，它似乎是一个框架，但我真的说不出来，有人能帮我找到它是什么吗？我相信他们只是在使用谷歌地图API并调整渲染地图的样式。这里是API的链接 您还可以深入了解他们正在进行的函数调用。进入开发者工具（假设您使用的是Chrome，但在其他浏览器上也类似）。然后在“开发人员工具”窗格的顶部栏上选择源。在“开发人员工具”窗格左侧的“源”部分中找到索引文件。按下显示代码部分底部的{}按钮。这将使代码可读。然后通过它查看与谷歌地图相关的内容。您也可以使用ctrl+f进行搜索
不过，我建议你还是浏览一下谷歌地图API网站 我相信他们只是在使用谷歌地图API并调整渲染地图的样式。这里是API的链接 您还可以深入了解他们正在进行的函数调用。进入开发者工具（假设您使用的是Chrome，但在其他浏览器上也类似）。然后在“开发人员工具”窗格的顶部栏上选择源。在“开发人员工具”窗格左侧的“源”部分中找到索引文件。按下显示代码部分底部的{}按钮。这将使代码可读。然后通过它查看与谷歌地图相关的内容。您也可以使用ctrl+f进行搜索
不过，我建议你还是浏览一下谷歌地图API网站 再次查看代码检查，查找写着
//我们在这里定义了地图的样式再次查看代码检查，查找显示
//我们在这里定义地图样式的那一行，代码的这一部分就是改变谷歌地图外观的部分
如需进一步定制，您可以在此处查看这些网站：
您可以在声明新地图时设置样式，snazzy maps是google maps配色方案的良好资源
尝试以下操作，只需将此.refs.map替换为您正在使用的任何颜色（颜色方案）：
您可以在声明新地图时设置样式，snazzy maps是google maps颜色方案的良好资源
尝试以下操作，只需将此.refs.map替换为您正在使用的任何颜色（颜色方案）：
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
});