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

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

// Some custom data that will change the look of your mapvar CustomMapStyles = [...]; google.maps.event.addDomListener(window, "load", function () {// Initialize your mapvar 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 mapvar 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网站：