web-dev-qa-db-ja.com

Googleマップをカスタマイズすると、高速道路のラベルブロックが壊れます

特定の色の濃淡を使用するようにGoogleマップをカスタマイズしようとしています。主要な道路名/番号を含むブロックが判読できないことを除いて、うまく機能しています。これらの要素をスタイルの対象にする方法を考えましたが、「色」の値を設定すると、テキストと背景の両方がその色に設定されます。また、彩度、ガンマ、明るさなどを調整しないと、テキストが読みやすくなります。

function initialize() {
    var latlng = new google.maps.LatLng(50.766472,0.284732);
    var styles = [
        {
            stylers: [
                { "gamma": 0.75 },
                { "hue": "#607C75" },
                { "saturation": -75 },
                { "lightness": 0 }
            ]
        },{
            featureType: "water",
            stylers: [
                {color: "#607C75"}
            ]
        }
    ];
    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
    var marker = new google.maps.Marker({
        position: latlng,
        title:"Living, dining, bedrooms by David Salmon"
    });
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
    map.setOptions({styles: styles});
    marker.setMap(map);
}
googlejavascriptmap
1
user2248809

道路のラベルについては、ラベルの色を設定する必要はありませんが、「色相」、「彩度」、「明度」のみをスタイルします。例えば：

var styles = [
    {
        "featureType": "road",
        "elementType": "labels.icon",
        "stylers": [
            { "Hue": "#0a9ad7" },
            { "saturation": 100 },
            { "lightness" : -20 }
        ]
    }
]

彩度と明度を変更することにより、ラベルの周りの線とラベル自体の色の差を変更できます。

3
Jorn Henkes

Labels.text.fillとlabels.text.strokeを個別にスタイル設定する必要があります。

var styles = [  { stylers: [{ hue: "#E29FC7" }]  },
    { featureType: "all", stylers: [{ visibility: "off" }]  },
    { featureType: "road", elementType: "all", stylers: [{ visibility: "simplified" }]  },
    { featureType: "road.arterial", stylers: [{ color: "#702076" }, { lightness: 50 }]  },
    { featureType: "road.highway", stylers: [{ color: "#702076" }, { lightness: 50 }]  },
    { featureType: "road.local", stylers: [{ color: "#e00073" }, { lightness: 50 }]  },
    { featureType: "road", elementType: "labels.text.stroke", stylers: [{ visibility: "off" }]  },
    { featureType: "road", elementType: "labels.text.fill", stylers: [{ color: "#000000" },{ lightness:5 },{ visibility: "on" }]  },
    { featureType: "road", elementType: "labels.icon", stylers: [{ visibility: "off" }]  },
    { featureType: "water", stylers: [{ visibility: "on" }]  },
    { featureType: "administrative", elementType: "labels.text.stroke", stylers: [{ visibility: "off" }]  },
    { featureType: "administrative", elementType: "labels.text.fill", stylers: [{ color: "#000000" },{ lightness:5 },{ visibility: "on" }]  },
];
1
Geremy Davey