2015-10-05 129 views
0

我使用这种类型的对谷歌地图的位置代码:我怎样才能让这个谷歌地图黑暗?

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<div style="overflow:hidden;height:280px;width:auto;"> 
<div id="gmap_canvas2" style="height:300px;width:auto;"></div> 
<style> 
    #gmap_canvas2 img { 
     max-width:none!important; 
     background:none!important 
    } 
</style> 
<script type="text/javascript"> 
    function init_map() { 
     var myOptions = { 
      zoom: 16, 
      center: new google.maps.LatLng(44.193444, 28.649466), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById("gmap_canvas2"), myOptions); 
     marker = new google.maps.Marker({ 
      map: map, 
      position: new google.maps.LatLng(44.193444, 28.649466) 
     }); 
     infowindow = new google.maps.InfoWindow({ 
      content: "<b>Club Megalos</b><br/>B-dul Mamaia, nr.155<br/> Constan&#539;a, Rom&acirc;nia" 
     }); 
     google.maps.event.addListener(marker, "click", function() { 
      infowindow.open(map, marker); 
     }); 
     infowindow.open(map, marker); 
    } 
    google.maps.event.addDomListener(window, 'load', init_map); 
</script> 

而且我有这个主题,但我不知道如何使用它,或者把它放在哪里。

[{"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":"administrative","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.country","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.country","elementType":"labels.text","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.locality","elementType":"all","stylers":[{"visibility":"simplified"},{"saturation":"-100"},{"lightness":"30"}]},{"featureType":"administrative.neighborhood","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"visibility":"simplified"},{"gamma":"0.00"},{"lightness":"74"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"lightness":"3"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"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}]}] 

这是从本网站https://snazzymaps.com/style/1261/dark

+0

在那个页面下载完整的例子说明你使用的确切代码的链接。 –

+0

非常感谢Rory McCrossan! – Schito

回答

1

the documentation描述,stylesMapOptions的属性传入google.maps.Map构造函数的对象。

working fiddle

代码片段:

function init_map() { 
 
    var myOptions = { 
 
    zoom: 16, 
 
    center: new google.maps.LatLng(44.193444, 28.649466), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    styles: [{ 
 
     "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": "administrative", 
 
     "elementType": "labels", 
 
     "stylers": [{ 
 
     "visibility": "off" 
 
     }] 
 
    }, { 
 
     "featureType": "administrative.country", 
 
     "elementType": "all", 
 
     "stylers": [{ 
 
     "visibility": "simplified" 
 
     }] 
 
    }, { 
 
     "featureType": "administrative.country", 
 
     "elementType": "geometry", 
 
     "stylers": [{ 
 
     "visibility": "simplified" 
 
     }] 
 
    }, { 
 
     "featureType": "administrative.country", 
 
     "elementType": "labels.text", 
 
     "stylers": [{ 
 
     "visibility": "simplified" 
 
     }] 
 
    }, { 
 
     "featureType": "administrative.province", 
 
     "elementType": "all", 
 
     "stylers": [{ 
 
     "visibility": "off" 
 
     }] 
 
    }, { 
 
     "featureType": "administrative.locality", 
 
     "elementType": "all", 
 
     "stylers": [{ 
 
     "visibility": "simplified" 
 
     }, { 
 
     "saturation": "-100" 
 
     }, { 
 
     "lightness": "30" 
 
     }] 
 
    }, { 
 
     "featureType": "administrative.neighborhood", 
 
     "elementType": "all", 
 
     "stylers": [{ 
 
     "visibility": "off" 
 
     }] 
 
    }, { 
 
     "featureType": "administrative.land_parcel", 
 
     "elementType": "all", 
 
     "stylers": [{ 
 
     "visibility": "off" 
 
     }] 
 
    }, { 
 
     "featureType": "landscape", 
 
     "elementType": "all", 
 
     "stylers": [{ 
 
     "visibility": "simplified" 
 
     }, { 
 
     "gamma": "0.00" 
 
     }, { 
 
     "lightness": "74" 
 
     }] 
 
    }, { 
 
     "featureType": "landscape", 
 
     "elementType": "geometry", 
 
     "stylers": [{ 
 
     "color": "#000000" 
 
     }, { 
 
     "lightness": 20 
 
     }] 
 
    }, { 
 
     "featureType": "landscape.man_made", 
 
     "elementType": "all", 
 
     "stylers": [{ 
 
     "lightness": "3" 
 
     }] 
 
    }, { 
 
     "featureType": "poi", 
 
     "elementType": "all", 
 
     "stylers": [{ 
 
     "visibility": "off" 
 
     }] 
 
    }, { 
 
     "featureType": "poi", 
 
     "elementType": "geometry", 
 
     "stylers": [{ 
 
     "color": "#000000" 
 
     }, { 
 
     "lightness": 21 
 
     }] 
 
    }, { 
 
     "featureType": "road", 
 
     "elementType": "geometry", 
 
     "stylers": [{ 
 
     "visibility": "simplified" 
 
     }] 
 
    }, { 
 
     "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 
 
     }] 
 
    }] 
 
    }; 
 
    map = new google.maps.Map(document.getElementById("gmap_canvas2"), myOptions); 
 
    marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: new google.maps.LatLng(44.193444, 28.649466) 
 
    }); 
 
    infowindow = new google.maps.InfoWindow({ 
 
    content: "<b>Club Megalos</b><br/>B-dul Mamaia, nr.155<br/> Constan&#539;a, Rom&acirc;nia" 
 
    }); 
 
    google.maps.event.addListener(marker, "click", function() { 
 
    infowindow.open(map, marker); 
 
    }); 
 
    infowindow.open(map, marker); 
 
} 
 
google.maps.event.addDomListener(window, 'load', init_map);
#gmap_canvas2 img { 
 
    max-width: none!important; 
 
    background: none!important 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div style="overflow:hidden;height:280px;width:auto;"> 
 
    <div id="gmap_canvas2" style="height:300px;width:auto;"></div>

0

这是你需要实现(连同其库文件)是什么:

<script>styles.push({ id: 1261, name: 'Dark', json: [{"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":"administrative","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.country","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.country","elementType":"labels.text","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.locality","elementType":"all","stylers":[{"visibility":"simplified"},{"saturation":"-100"},{"lightness":"30"}]},{"featureType":"administrative.neighborhood","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"visibility":"simplified"},{"gamma":"0.00"},{"lightness":"74"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"lightness":"3"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"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}]}] });</script>