Question

我正在尝试使用API v3.exp构建自定义的Google地图。我也想定制建筑物的颜色，但似乎如果我改变了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); 
});

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

1 个答案: