Google Maps API 风格的地图 - 颜色问题答案

【问题标题】：Google Maps API styled map - colors problemGoogle Maps API 风格的地图 - 颜色问题
【发布时间】：2011-02-15 22:51:04
【问题描述】：

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

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

这是我在 Javascript 中用于设置水样式的代码。

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

问题是它根本不起作用。我真的不知道这是什么原因。你能看出我做错了什么吗？

谢谢

【问题讨论】：

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

【解决方案1】：

当 Google Maps API 与我为样式化地图选择的颜色不完全匹配时，我在浏览器中调出地图，截取了两个阴影不太匹配的区域的屏幕截图，然后打开了该屏幕截图在图像编辑器（pixlr.com，在我的例子中）中，使用颜色吸盘工具来获取不太正确的阴影的饱和度和亮度，在我的 Google Maps APi 调用中调整我的饱和度和/或亮度1 使其更接近我想要的颜色的饱和度和/或亮度，并重复直到我得到匹配的颜色。这很乏味——我最终拍了大约六张快照才完美——但它奏效了。

【讨论】：

【解决方案2】：

我为此苦苦挣扎了很久，尝试了two different谷歌地图颜色选择器，但没有成功。

但是，我尝试使用的 second one 提醒我注意另一种指定颜色的方式：您可以使用 color 属性，而不是为 Google 对 HSL 的处理而苦苦挣扎：

例如：

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

【讨论】：

【解决方案3】：

我这样做了，它正在工作。看看

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

【讨论】：

您好，感谢您的回复。虽然颜色不太正确:(我找到了这个解决方案：stackoverflow.com/questions/3472040/rgb-value-to-hsl-converter，但它也不完全正确。顺便说一句。你为什么使用 ("#006b33",-70,100)？
我只是把我自己的颜色放在那里。这不是你的颜色。但如果代码有效，那么你可以用你在问题中提到的这个工具找到正确的颜色？
:) 问题有点不同。此代码显示颜色但效果不佳。颜色不正确。我提供的输入是我从该工具中得到的。这很奇怪：S