无法确定如何设置某些Google地图元素的样式

时间:2016-07-20 22:24:22

标签: json google-maps

我正试图设计Google地图,我几乎已经到了我想要的地方,但是我遇到了一些问题。

你可以在屏幕上看到有一些元素仍然是我想要变暗的颜色,但是我无法弄清楚我应该改变的JSON究竟是什么。

JSFiddle在这里:https://jsfiddle.net/ojdavey/84ewc0jx/20/

样式化JSON:

[{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#707070"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"all","stylers":[{"gamma":"0.82"},{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"lightness":"7"},{"visibility":"on"}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"administrative","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#2f2f2f"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"poi","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":"-100"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"gamma":"0.77"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"lightness":"-100"},{"color":"#181818"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"lightness":"-100"},{"color":"#181818"},{"visibility":"on"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"lightness":29},{"weight":0.2},{"color":"#ff0000"},{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"lightness":"-100"},{"color":"#181818"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"lightness":"-100"},{"color":"#181818"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19},{"visibility":"on"},{"gamma":"0.00"}]},{"featureType":"transit.station","elementType":"all","stylers":[{"gamma":"0.00"},{"visibility":"off"}]},{"featureType":"transit.station","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"transit.station.rail","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}]

任何帮助都会很棒!

enter image description here

enter image description here

enter image description here

1 个答案:

答案 0 :(得分:2)

我想我知道你问题的解决方案。

以下是我用于测试的变量样式:

var styleArray = [{
featureType : "administrative",
elementType : "geometry",
stylers: [
{ color: '#000000' },
{"lightness":50}
]
},
{
featureType : "poi",
elementType : "geometry",
stylers: [
{ color: '#000000' },
{"lightness":21}
]
},
{
featureType : "landscape",
elementType : "geometry",
stylers: [
{ color: '#000000' },
{"lightness":21}
]
},
{
featureType : "road",
elementType : "geometry",
stylers: [
{ color: '#000000' },
{"lightness":2}
]
},
{
featureType : "transit",
elementType : "geometry",
stylers: [
{ color: '#000000' },
{"lightness":21}
]
}
];

结果如下:

enter image description here

经过一些测试后,我想出了:

var styleArray = [

{
featureType : "all",
elementType : "geometry",
stylers: [
{ color: '#000000' },
{"lightness":30}
]
},
{
featureType : "administrative",
elementType : "geometry",
stylers: [
{ color: '#000000' },
{"lightness":50}
]
},
{
featureType : "poi",
elementType : "geometry",
stylers: [
{ color: '#000000' },
{"lightness":21}
]
},
{
featureType : "landscape",
elementType : "geometry",
stylers: [
{ color: '#000000' },
{"lightness":21}
]
},
{
featureType : "road",
elementType : "geometry",
stylers: [
{ color: '#000000' },
{"lightness":2}
]
},
{
featureType : "transit",
elementType : "geometry",
stylers: [
{ color: '#000000' },
{"lightness":21}
]
},
{
featureType : "water",
elementType : "geometry",
stylers: [
{ color: '#000000' }
]
}
]; 

结果如下:

enter image description here

只需设置功能类型"全部"然后,这将把规则应用于所有选择器类型。不幸的是,第一张颜色较浅的图像似乎没有特定的常数,例如" pio,administrative,landscape"但是包含在" all"类型特征