如何在JavaScript中自定义Google Maps颜色和样式

根据Google Maps Docs, 如果你为地图元素定义了自己的样式, 则可以更改地图的外观。但是, 这不是直接使用CSS而是通过自定义JS属性定义(数据数组)完成的, 可以在地图初始化期间在styles属性中进行定义：

// Some custom data that will change the look of your map
var CustomMapStyles = [...];

google.maps.event.addDomListener(window, "load", function () {

    // Initialize your map
    var map = new google.maps.Map(document.getElementById("map_div"), {
        center: new google.maps.LatLng(33.808678, -117.918921), zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, styles: CustomMapStyles
    });
});

此数组中的每个项目都应该是一个文字对象, 该对象具有一些属性, 这些属性定义其中的样式应具有指定样式的元素。例如, 如果我们想要黑色的地图, 则可以遵循并分析CustomMapStyles变量中的以下规则：

<!-- Map Container -->
<div id="map_div"></div>

<script>
    /** 
    * Define an array of custom styles.
    */
    var CustomMapStyles = [
        {
            "featureType": "all", "elementType": "labels.text.fill", "stylers": [
                {
                    "saturation": 36
                }, {
                    "color": "#000000"
                }, {
                    "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": "geometry.fill", "stylers": [
                {
                    "color": "#000000"
                }, {
                    "lightness": 20
                }
            ]
        }, {
            "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [
                {
                    "color": "#000000"
                }, {
                    "lightness": 17
                }, {
                    "weight": 1.2
                }
            ]
        }, {
            "featureType": "landscape", "elementType": "geometry", "stylers": [
                {
                    "color": "#000000"
                }, {
                    "lightness": 20
                }
            ]
        }, {
            "featureType": "poi", "elementType": "geometry", "stylers": [
                {
                    "color": "#000000"
                }, {
                    "lightness": 21
                }
            ]
        }, {
            "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [
                {
                    "color": "#000000"
                }, {
                    "lightness": 17
                }
            ]
        }, {
            "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [
                {
                    "color": "#000000"
                }, {
                    "lightness": 29
                }, {
                    "weight": 0.2
                }
            ]
        }, {
            "featureType": "road.arterial", "elementType": "geometry", "stylers": [
                {
                    "color": "#000000"
                }, {
                    "lightness": 18
                }
            ]
        }, {
            "featureType": "road.local", "elementType": "geometry", "stylers": [
                {
                    "color": "#000000"
                }, {
                    "lightness": 16
                }
            ]
        }, {
            "featureType": "transit", "elementType": "geometry", "stylers": [
                {
                    "color": "#000000"
                }, {
                    "lightness": 19
                }
            ]
        }, {
            "featureType": "water", "elementType": "geometry", "stylers": [
                {
                    "color": "#000000"
                }, {
                    "lightness": 17
                }
            ]
        }
    ];

    google.maps.event.addDomListener(window, "load", function () {

        // Initialize your map
        var map = new google.maps.Map(document.getElementById("map_div"), {
            center: new google.maps.LatLng(33.808678, -117.918921), zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, styles: CustomMapStyles
        });
    });
</script>

你可以在JSFiddle中找到一个在线示例, 以查看具有定义样式的自定义地图：

样式的定义不是一件容易的事, 因此你将需要在此处阅读Google Maps的文档, 以了解如何根据需要对地图进行样式化。

在哪里可以找到自定义的即用型主题

如果你与我完全一样, 那么尝试构建自己的主题时会感到很无聊, 因此你可以找到可以轻松地在项目中使用或根据需要更改它们的预置主题(这比从头开始更容易) )。我们正在谈论Snazzy Maps网站：

在此网站中, 你将找到JSON字符串的集合, 可以在脚本中将其定义为变量以定义自定义主题。你还将找到一个屏幕截图, 以查看地图的外观。

编码愉快！