Google地圖主題有更好的代碼結構嗎？

我正在創建Google地圖Js片段，用戶可以通過data-color從HTML中選擇顏色。我創建了幾個顏色主題。但是，當爲所有主題添加樣式時，它看起來非常漫長，看起來很奇怪。有什麼辦法可以將代碼結構減少到一個嗎？我可以爲此寫For循環嗎？Google地圖主題有更好的代碼結構嗎？

這是凌亂的代碼。

/* 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'; 

    }

在此先感謝。

來源

2015-07-03 Surjith S M

我會開始在對象中添加顏色。這就是說，據我所知，你必須這樣做，除非你創建自己的類和自己的原型，以使其更快和可重用。 – briosheje

@briosheje我也在找另一種方式。它爲此分配顏色值。 ''stylers'：[{color =「color」：$ map_color +'1' }]'color在哪裏：mapcolor + 1實際上應該返回green1的值（如果選中）。但它不工作。在這種情況下我們可以做什麼？ –

@briosheje得到了eval（）的工作，但我堅持使用Object方法，非常感謝。 –

創建一個可以使用$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"]; 
};

來源

2015-07-03 13:01:39 northlandiguana

這工作很好..而不是對象我也試過'eval（）'方法，也工作。但我堅持對象方法。非常感謝：） –

我會把所有的主題放在這樣的對象中。

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

來源

2015-07-03 13:02:44 Enijar

Google地圖主題有更好的代碼結構嗎？

回答

相關問題