我正在创建一个Google Maps Js代码段，用户可以通过data-color从HTML中选择颜色。我创建了几个颜色主题。但是当为所有主题添加样式时，它看起来非常冗长并且看起来很奇怪。有什么办法可以将代码结构减少到一个吗？我能为此写一下For循环吗？
这是凌乱的代码。
/* Map's style */
var red1 = "#fd685b",
red2 = "#fe8e84",
orange1 = "#fa6f57",
orange2 = "#fb9381",
yellow1 = "#fecd5e",
yellow2 = "#fedc8f",
green1 = "#4eae49",
green2 = "#73c16f",
mint1 = "#4fcead",
mint2 = "#7bdac2",
aqua1 = "#4FC1E9",
aqua2 = "#73d2f4",
blue1 = "#5D9CEC",
blue2 = "#86b5f1",
purple1 = "#ab94e9",
purple2 = "#c0afef",
pink1 = "#ea89bf",
pink2 = "#efa7cf",
white1 = "#E6E9ED",
white2 = "#F5F7FA",
grey1 = "#AAB2BD",
grey2 = "#CCD1D9",
darkgrey1 = "#434A54",
darkgrey2 = "#5f656d";
if ($map_color == 'red') {
var styles = [{
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"stylers": [{
"color": red1
}]
}, {
"featureType": "water",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.natural",
"stylers": [{
"color": red2
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.man_made",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"stylers": [{
"visibility": "off"
}]
}],
textcolor = red1;
}
if ($map_color == 'orange') {
var styles = [{
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"stylers": [{
"color": orange1
}]
}, {
"featureType": "water",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.natural",
"stylers": [{
"color": orange2
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.man_made",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"stylers": [{
"visibility": "off"
}]
}],
textcolor = orange1;
}
if ($map_color == 'yellow') {
var styles = [{
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"stylers": [{
"color": yellow1
}]
}, {
"featureType": "water",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.natural",
"stylers": [{
"color": yellow2
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.man_made",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"stylers": [{
"visibility": "off"
}]
}],
textcolor = yellow1;
}
if ($map_color == 'green') {
var styles = [{
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"stylers": [{
"color": green1
}]
}, {
"featureType": "water",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.natural",
"stylers": [{
"color": green2
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.man_made",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"stylers": [{
"visibility": "off"
}]
}],
textcolor = green1;
}
if ($map_color == 'mint') {
var styles = [{
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"stylers": [{
"color": mint1
}]
}, {
"featureType": "water",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.natural",
"stylers": [{
"color": mint2
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.man_made",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"stylers": [{
"visibility": "off"
}]
}],
textcolor = mint1;
}
if ($map_color == 'aqua') {
var styles = [{
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"stylers": [{
"color": aqua1
}]
}, {
"featureType": "water",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.natural",
"stylers": [{
"color": aqua2
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.man_made",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"stylers": [{
"visibility": "off"
}]
}],
textcolor = aqua1;
}
if ($map_color == 'blue') {
var styles = [{
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"stylers": [{
"color": blue1
}]
}, {
"featureType": "water",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.natural",
"stylers": [{
"color": blue2
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.man_made",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"stylers": [{
"visibility": "off"
}]
}],
textcolor = blue1;
}
if ($map_color == 'purple') {
var styles = [{
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"stylers": [{
"color": purple1
}]
}, {
"featureType": "water",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.natural",
"stylers": [{
"color": purple2
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.man_made",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"stylers": [{
"visibility": "off"
}]
}],
textcolor = purple1;
}
if ($map_color == 'pink') {
var styles = [{
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"stylers": [{
"color": pink1
}]
}, {
"featureType": "water",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.natural",
"stylers": [{
"color": pink2
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.man_made",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"stylers": [{
"visibility": "off"
}]
}],
textcolor = pink1;
}
if ($map_color == 'white') {
var styles = [{
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"stylers": [{
"color": white1
}]
}, {
"featureType": "water",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.natural",
"stylers": [{
"color": white2
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.man_made",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"stylers": [{
"visibility": "off"
}]
}],
textcolor = '#333';
}
if ($map_color == 'grey') {
var styles = [{
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"stylers": [{
"color": grey1
}]
}, {
"featureType": "water",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.natural",
"stylers": [{
"color": grey2
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.man_made",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"stylers": [{
"visibility": "off"
}]
}],
textcolor = '#333';
}
if ($map_color == 'dark-grey') {
var styles = [{
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"stylers": [{
"color": darkgrey1
}]
}, {
"featureType": "water",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.natural",
"stylers": [{
"color": darkgrey2
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.man_made",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"stylers": [{
"visibility": "off"
}]
}],
textcolor = '#333';
}
if ($map_color == 'invert') {
var styles = [{
"stylers": [{
"invert_lightness": "true"
}, {
"hue": "0xffbb00"
}, {
"saturation": "-100"
}, {
"lightness": "15"
}]
}],
textcolor = '#333';
}
提前致谢。
答案 0 :(得分：1)
最简单的方法是创建一个可以使用$map_color变量动态访问的对象，而不是使用一堆else if语句。例如：
/* Map's style */
var colors = {
red1: "#fd685b",
red2: "#fe8e84",
orange1: "#fa6f57",
orange2: "#fb9381",
yellow1: "#fecd5e",
yellow2: "#fedc8f",
green1: "#4eae49",
green2: "#73c16f",
mint1: "#4fcead",
mint2: "#7bdac2",
aqua1: "#4FC1E9",
aqua2: "#73d2f4",
blue1: "#5D9CEC",
blue2: "#86b5f1",
purple1: "#ab94e9",
purple2: "#c0afef",
pink1: "#ea89bf",
pink2: "#efa7cf",
white1: "#E6E9ED",
white2: "#F5F7FA",
grey1: "#AAB2BD",
grey2: "#CCD1D9",
darkgrey1: "#434A54",
darkgrey2: "#5f656d"
};
if ($map_color == 'invert') {
var styles = [{
"stylers": [{
"invert_lightness": "true"
}, {
"hue": "0xffbb00"
}, {
"saturation": "-100"
}, {
"lightness": "15"
}]
}],
textcolor = '#333';
} else {
var styles = [{
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"stylers": [{
"color": colors[$map_color + "1"]
}]
}, {
"featureType": "water",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.natural",
"stylers": [{
"color": colors[$map_color + "2"]
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.man_made",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"stylers": [{
"visibility": "off"
}]
}],
textcolor = colors[$map_color + "1"];
};
答案 1 :(得分：0)
我会将所有主题放在像这样的对象中。
var themes = {
red: {
styles: [{
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"stylers": [{
"color": red1
}]
}, {
"featureType": "water",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.natural",
"stylers": [{
"color": red2
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.man_made",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"stylers": [{
"visibility": "off"
}]
}],
textcolor: red1
},
...
};
然后访问这样的主题。
var theme = themes[$map_color] // Contains the theme's `styles` and `textcolor`
theme.styles // Get theme's styles
theme.textcolor // Get theme's text color