样式化地图GoogleapiV3.docVIP

样式化地图 通过 StyledMapType，您可以自定义标准 Google 基本地图的显示形式，更改诸如道路、公园和建筑物区域等元素的显示，以体现与默认地图类型中所用样式不同的样式。这些组件称为地图项，您可以通过 StyledMapType 选择这些地图项，并将可视样式应用于地图项的显示（包括隐藏全部地图项）。借助这些更改，可以在地图上强调特定组件或周围页面的补充内容。 StyledMapType() 构造函数采用 MapTypeStyles 数组作为参数，每个数组均由选择器和样式器组成。选择器指定应选择以应用样式的地图组件，而样式器指定这些元素的可视修改。 地图项 地图由一组地图项构成，如道路或公园，这些地图项使用 MapTypeStyleFeatureType 指定。地图项类型构成类别树，根为 all。要了解地图中可供选择的地图项的完整列表，请参见 MapTypeStyleFeatureType 参考。指定类型 all 将选择所有地图元素。 某些地图项类型类别包含子类别，子类别使用点表示法指定（如 landscape.natural 或 road.local）。如果指定父级地图项（如 road），则应用于此选择项的样式也将应用于包括子类别在内的所有道路。 此外，地图上的某些地图项通常包含不同元素。例如，道路不仅包含地图上绘制的线，还包含地图上附加的用于表示其名称的文本。地图项内元素的选择可通过指定类型 MapTypeStyleElementType 的类别进行修改。系统支持以下元素类型： all（默认）用于选择相应类型的所有地图项。 geometry 只选择该地图项的地理元素。 labels 只选择与该地图项关联的文本标签。 如果未指定任何元素类型，则样式将应用于所有元素（不考虑元素类型）。 以下代码段选择所有本地道路的标签： { featureType: road.local, elementType: labels } 样式器 样式器为 MapTypeStyler 类型的格式选项，应用于在每个 MapTypeStyle 规则中指定的地图项和元素。目前，系统支持以下 MapTypeStyler 选项： hue lightness saturation gamma inverse_lightness visibility 样式规则必须作为不同的样式单独应用，并且按照 MapTypeStyler 数组中显示的次序应用。 下例显示布鲁克林的地图，其道路已更改为亮绿色，住宅区已更改为黑色： var map;? var brooklyn = new google.maps.LatLng(40.6743890, -73.9455);? ? function initialize() {? ? ? var stylez = [{? ? ? ? featureType: road.local,? ? ? ? elementType: geometry,? ? ? ? stylers: [{? ? ? ? ? hue: #00ff00? ? ? ? },{? ? ? ? ? saturation:100 ?? ? ? ? }]? ? ? },? ? ? {? ? ? ? featureType: landscape,? ? ? ? elementType: geometry,? ? ? ? stylers: [{? ? ? ? ? hue: #000000? ? ? ? },{? ? ? ? ? saturation: 75? ? ? ? },{? ? ? ? ? lightness: -100? ? ? ? }]? ? ? }];? ? ? var mapOptions = {? ? ? zoom: 11,? ? ? center: brooklyn? ? };? ? map = new google.maps.Map(document.getElementById(map_canvas),? ? ? ? mapOptions);? ? ? var styledMapOptions = {? ? ? ? map: map,? ? ? ? name: Hip-Hop? ? }? ? ? var jayzMapType = ?new google.maps.StyledMapType(stylez,styledMapOptions);? ? ? map.mapTypes.set(hiphop, jayzMapType);? ? map.setMapTypeId(hiphop);? } 查看示例 (maptype-styled-s