web-dev-qa-db-fra.com

La personnalisation de Google Maps annule les blocages d'étiquettes d'autoroute

J'essaie de personnaliser une carte Google pour utiliser des nuances d'une couleur particulière. Cela fonctionne bien sauf que les blocs qui contiennent des noms/numéros de route principaux sont illisibles. J'ai découvert comment cibler les styles sur ces éléments, mais la définition de la valeur 'color' définit le texte et l'arrière-plan sur cette couleur. Et aucun réglage de saturation, gamma, légèreté, etc. ne semble rendre le texte lisible.

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

Pour les étiquettes des routes, il n'est pas nécessaire de définir la couleur de l'étiquette, mais seulement de styliser la "teinte", la "saturation" et la "luminosité". Par exemple:

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

En modifiant la saturation et la luminosité, vous pouvez modifier la différence entre la ligne autour de l'étiquette et la couleur de l'étiquette elle-même.

3
Jorn Henkes

Vous devez personnaliser individuellement les labels.text.fill et 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