Карта в стиле Google Maps API - проблема цветов - PullRequest
Новая
       27

Карта в стиле Google Maps API - проблема цветов

0 голосов
/ 16 февраля 2011

Я не могу правильно установить цвет воды с 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}]

Проблема в том, что он вообще не работает. Я действительно не знаю, что является причиной этого. Вы видите что-то, что я делаю не так?

Спасибо

Ответы [ 3 ]

1 голос
/ 18 мая 2011

Когда Google Maps API не совсем соответствовал цвету, который я выбрал для стилизованной карты, я поднял карту в браузере, сделал снимок экрана только с областью с двумя не совсем подходящими оттенками и открыл этот снимок экрана в редакторе изображений (в моем случае pixlr.com) использовал инструмент color-sucker, чтобы получить насыщенность и яркость для оттенка, который был не совсем правильным, отрегулировал мою насыщенность и / или яркость в моем вызове Google Maps APi на 1, чтобы приблизить его к насыщенности и / или яркости цвета, который я хотел, и повторял, пока я не получил что-то, что соответствовало. Это было утомительно - я закончил тем, что сделал приблизительно полдюжины снимков прежде, чем это было идеально - но это работало.

1 голос
/ 23 октября 2013

Я долго боролся с этим и пробовал два разные палитры цветов Карт Google безуспешно.

Однако второй Я пытался предупредить меня о другом способе определения цвета: вместо того, чтобы бороться с принятием Google на HSL, вы можете просто использовать свойство color:

Например: 

var mapStyles = [
  {
    featureType: "water",
    stylers: [
      { color: '#b6c5dd' }
    ]
  }
];
0 голосов
/ 16 февраля 2011

Я сделал это так, и это работает. Посмотрите 

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