自定义谷歌地图 Landscape.man_made 颜色并保持阴影？答案

【问题标题】：Customizing google maps landscape.man_made color and keep the shading?自定义谷歌地图 Landscape.man_made 颜色并保持阴影？
【发布时间】：2013-10-21 21:18:40
【问题描述】：

我正在尝试使用 API v3.exp 构建自定义的谷歌地图。我也想自定义建筑物的颜色，但似乎如果我改变 Landscape.man_made 的颜色，我正在失去建筑物中美丽的阴影效果（不同的色调）。见附图。

Default color Custom color

StyledMapType 对象的 json 是

var mapStyle = [{
  "featureType": "landscape.man_made",
  "elementType": "geometry.fill",
  "stylers": [{
     "color": "#808080"
  }]
}];

是否有可能改变建筑物的颜色并保持阴影效果？

【问题讨论】：

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

【解决方案1】：

是的。有这样的可能。只需使用色调和饱和度

{ stylers: [ { hue: "#00ffe6" }, { saturation: -20 } ] }

更详细的例子可以在这里找到https://developers.google.com/maps/documentation/javascript/styling

以下是我的样式化谷歌地图示例和完整代码

var map;
function initialize() {
    var lat="53.89076";
    var long="27.57156";
    var myLatLng=new google.maps.LatLng(lat, long);
    var mapOptions = {
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: myLatLng,
        styles: [
            { "stylers": [ { "hue": "#3d535b" }, { "saturation": -20 } ] },
            { "elementType": "labels.text.fill", "stylers": [ { "color": "#3d535b" } ] },
            { "elementType": "labels.text.stroke", "stylers": [ { "color": "##e8eeef" } ] },
            { "featureType": "road", "elementType": "geometry.fill", "stylers": [ { "color": "#e8eeef" } ] },
            { "featureType": "road", "elementType": "geometry.stroke", "stylers": [ { "color": "#b1bcbf" } ] },
            { "featureType": "water", "stylers": [ { "color": "#adb9bc" } ] },
            { "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "color": "#3d535b" } ] },
            { "featureType": "water", "elementType": "labels.text.stroke", "stylers": [ { "color": "#d1d9db" } ] },
            { "featureType": "poi", "elementType": "geometry", "stylers": [ { "visibility": "off" } ] },
            { "featureType": "poi.park", "elementType": "geometry", "stylers": [ { "color": "#bfc9cc" }, { "visibility": "on" } ] },
            { "featureType": "poi.business", "elementType": "geometry", "stylers": [ { "color": "#cdd6d8" }, { "visibility": "on" } ] },
            { "featureType": "poi.school", "elementType": "geometry", "stylers": [ { "color": "#cdd6d8" }, { "visibility": "on" } ] },
            { "featureType": "poi.medical", "elementType": "geometry", "stylers": [ { "color": "#cdd6d8" }, { "visibility": "on" } ] },
            { "featureType": "poi.government", "elementType": "geometry", "stylers": [ { "color": "#cdd6d8" }, { "visibility": "on" } ] },
            { "featureType": "landscape.natural", "elementType": "geometry", "stylers": [ { "color": "#dee5e8" } ] }
        ]
    };

    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    var iconBase = 'images/pin.png';

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon:iconBase,
        title: 'Moby Dick'
    });

    marker.setMap(map);       

}

google.maps.event.addDomListener(window, 'load', initialize);

google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});

【讨论】：