google-maps - 自定义谷歌地图 Landscape.man_made 颜色并保持阴影？

Question

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

默认颜色 自定义颜色

StyledMapType 对象的 json 是

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

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

Answer 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); 
});