[英]Google Maps API styled map - colors problem
I can't properly set color of water with google maps api v3. 我无法使用Google Maps API v3正确设置水的颜色。
My RGB color is: #676a59. 我的RGB颜色是:#676a59。 I've converted it to HSL using this tool: http://www.workwithcolor.com/hsl-color-picker-01.htm . 我使用这个工具将它转换为HSL: http : //www.workwithcolor.com/hsl-color-picker-01.htm 。 The result is: color: hsl(71, 9%, 38%); 结果是:颜色:hsl(71,9%,38%);
This is the code I use in Javascript to style water. 这是我在Javascript中用来设计水的代码。
stylers: [{hue: "#676a59"}, {lightness: 38}, {saturation: 9}, {visibility: "on" }, {gamma: 1.0}]
The problem is that it doesn't work at all. 问题是它根本不起作用。 I don't really know what is the reason of that. 我真的不知道是什么原因。 Can you see something that I'm doing wrong? 你能看到我做错的事吗?
Thanks 谢谢
I struggled with this for a long time, and tried two different Google Maps colour pickers without success. 我很长时间都在努力,并尝试了两个 不同的谷歌地图颜色选择器,没有成功。
However, the second one I tried alerted me to another way of specifying the colour: Rather than struggling with Google's take on HSL, you can just use the color
property: 然而,我试过的第二个提醒我另一种指定颜色的方法:你可以使用color
属性,而不是挣扎谷歌对HSL的看法:
For example: 例如:
var mapStyles = [
{
featureType: "water",
stylers: [
{ color: '#b6c5dd' }
]
}
];
When Google Maps API did not quite match the color I selected for a styled map, II pulled up the map in a browser, took a screenshot of just the area with the two shades that weren't quite matching, opened that screenshot up in an image editor (pixlr.com, in my case), used the color-sucker tool to get the saturation and lightness for the shade that wasn't quite right, adjusted my saturation and/or lightness in my Google Maps APi call by 1 to get it closer to the saturation and/or lightness of the color I wanted, and repeated until I got something that matched. 当Google Maps API与我为样式化地图选择的颜色不完全匹配时,我在浏览器中拉出地图,截取了两个不完全匹配的区域的截图,打开了该截图图像编辑器(pixlr.com,在我的例子中),使用颜色吸盘工具来获得不太正确的阴影的饱和度和亮度,将我的Google Maps APi调用中的饱和度和/或亮度调整为1让它更接近我想要的颜色的饱和度和/或亮度,并重复直到我得到匹配的东西。 It was tedious--I ended up taking about a half dozen snapshots before it was perfect--but it worked. 这很乏味 - 我最终在它完美之前拍摄了大约六个快照 - 但它确实有效。
I did it like this and it is working.Take a look 我是这样做的,它正在工作。看看
var stylez = [{
featureType: "water",
elementType: "all",
stylers: [{
hue: "#006b33"
},
{
lightness: -70
},
{
saturation:100
}]
}];
//Map options
var mapOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'yourName']}
};
//Make a new map
map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);
var styledMapOptions = {
name: "yourName"
}
var yourNameMapType = new google.maps.StyledMapType(
stylez, styledMapOptions);
map.mapTypes.set('yourName', yourNameMapType);
map.setMapTypeId('yourName');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.