谷歌地图API样式地图 - 颜色问题

时间:2011-02-15 22:51:05

标签: javascript google-maps google-maps-api-3 google-api

我无法使用google maps api v3正确设置水的颜色。

我的RGB颜色是:#676a59。我已使用此工具将其转换为HSL:http://www.workwithcolor.com/hsl-color-picker-01.htm。结果是:颜色:hsl(71,9%,38%);

这是我在Javascript中用来设计水的代码。

stylers: [{hue: "#676a59"}, {lightness: 38}, {saturation: 9},  {visibility: "on" }, {gamma: 1.0}]

问题是它根本不起作用。我真的不知道是什么原因。你能看到我做错的事吗?

由于

3 个答案:

答案 0 :(得分:1)

当Google Maps API与我为样式化地图选择的颜色不完全匹配时,我在浏览器中提取了地图,截取了两个不完全匹配的区域的截图,打开了截图在图像编辑器中(pixlr.com,在我的例子中),使用颜色吸盘工具来获得不太正确的阴影的饱和度和亮度,在我的Google Maps APi调用中调整饱和度和/或亮度通过1使其更接近我想要的颜色的饱和度和/或亮度,并重复直到我得到匹配的东西。这很乏味 - 我最终在它完美之前拍摄了大约六个快照 - 但它确实有效。

答案 1 :(得分:1)

我很长时间以来一直在努力,并尝试two different Google地图颜色选择器没有成功。

然而,我试过的second one提醒我另一种指定颜色的方法:您可以使用color属性,而不是挣扎于谷歌对HSL的抨击:

例如:

var mapStyles = [
  {
    featureType: "water",
    stylers: [
      { color: '#b6c5dd' }
    ]
  }
];

答案 2 :(得分:0)

我是这样做的,它正在工作。看看

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');