您的位置:首页 > Web前端 > CSS

创建 StyledMapType 地图样式

2016-05-12 09:28 519 查看
您可以通过创建
StyledMapType
并向构造函数传递特征和样式器信息,新建作为样式应用对象的地图类型。此方法不会影响默认地图类型的样式。

如需新建地图类型:

创建您的样式数组。请参阅“地图特征和样式器”中的相关说明。

新建一个
google.maps.StyledMapType
对象,向其传递样式数组以及新地图类型的名称。

创建您的地图对象,然后在地图选项的
mapTypeIds
数组内加入新地图类型的标识符(它是
mapTypeControlOptions
对象的一个属性)。

将上一步骤中的标识符与新样式化地图关联。

将地图设置为使用新地图类型。

function initialize() {

// Create an array of styles.
var styles = [
{
stylers: [
{ hue: "#00ffe6" },
{ saturation: -20 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];

// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});

// Create a map object, and include the MapTypeId to add
// to the map type control.
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(55.6468, 37.581),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);

//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: