谷歌地图主题化有更好的代码结构吗
Is there a better code structure for Google Maps Theming?
我正在创建一个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';
}
提前谢谢。
创建一个可以使用$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"];
};
我会把所有的主题都放在这样的对象中。
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
相关文章：
- 如何解析结构不良的 html 代码
- JQuery代码语法问题?(“不允许内联控制结构”）
- TypeScript代码类似于揭示模块模式结构
- NodeJ的后端代码结构
- 类代码结构，使用非立即执行的模块模式变体
- DurandalJS中的文件和代码结构
- 为什么将代码迁移到类结构会破坏代码
- Jquery Mobile.离线应用的标记和代码结构
- 包装库的各个部分的代码结构是什么，它的用途是什么
- 使用 JS-ctypes 将结构化数据传递给本机代码
- JS:在一行代码中初始化并推送到多维数组?创建树结构
- 对Javascript层次结构行为感到困惑(给出示例代码）
- 套接字.IO代码结构:在哪里放置方法
- ExtJS的代码结构
- AngularJS代码结构.它们有什么不同吗?
- 在代码结构中提供静态内容，代码结构由yeoman为angular fullstack生成
- 下面的javascript代码结构意味着什么?
- 谷歌地图主题化有更好的代码结构吗
- requireJS + AngularJS代码结构拆分在不同的文件中
- EXT JS中的代码结构
