更改谷歌地图的颜色 [英] Change the colors of the google maps
问题描述
是否有可能使用新的Google地图JavaScript API将地图的颜色更改为具有类似此类的内容在浅蓝色面板下的地图 风格化的地图可能是你正在寻找的东西，
首先值得一提的是向导（注意在＃9中，它应该是 https://mapstyle.withgoogle.com 以下是参考资料： http://code.google.com/ apis / maps / documentation / javascript / reference.html＃StyledMapType http://code.google.com/apis/maps/documentation/javascript/styling.html 有一个样式化的地图示例在静态API 饱和度和亮度控制着外观。饱和度较低=颜色较少，亮度较高=较白 is it possible with the new Google maps javascript API to change the colors of the maps to have something like this map under the light blue panel Styled maps might be what you are looking for, It's worth mentioning the wizard first (note that in #9, it should be https://mapstyle.withgoogle.com These are references: http://code.google.com/apis/maps/documentation/javascript/reference.html#StyledMapType http://code.google.com/apis/maps/documentation/javascript/styling.html There's an example of a styled map in the static API
http://code.google.com/apis/maps/documentation/staticmaps/#StyledMaps The saturation and lightness control the look. Less saturated = less color, more lightness = whiter
这篇关于更改谷歌地图的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ styles $ b
http://code.google.com / apis / maps / documentation / staticmaps /＃StyledMaps
<！DOCTYPE html>
< html>
< head>
< style type =text / css>
html，body，#map_canvas {margin：0;填充：0;身高：100％}
< / style>
< script type =text / javascriptsrc =http://maps.googleapis.com/maps/api/js?sensor=false>< / script>
< script type =text / javascript>
var map;
var grayStyles = [
{
featureType：all，
stylers：[
{saturation：-90}，
{lightness：50}
]
}，
];
var mapOptions = {
center：new google.maps.LatLng（41.325663，19.8029607），
zoom：15，
styles：grayStyles，
mapTypeId：google。 maps.MapTypeId.ROADMAP
};
函数initialize（）{
map = new google.maps.Map（document.getElementById（map_canvas），mapOptions）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
< / head>
< body>
< div id =map_canvas>< / div>
< / body>
< / html>
styles, not style)<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var grayStyles = [
{
featureType: "all",
stylers: [
{ saturation: -90 },
{ lightness: 50 }
]
},
];
var mapOptions = {
center: new google.maps.LatLng(41.325663, 19.8029607),
zoom: 15,
styles: grayStyles,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
