我正在使用新的 Google map v3 STYLED MAP。
我想根据缩放级别更改 map 的样式。
我有以下伪代码,如何根据缩放级别更改我的 map 样式?
var myOptions = {
zoom: zoom,
center: latlng,
disableDefaultUI: true,
navigationControl: true,
scrollwheel: false,
navigationControlOptions: {style:
google.maps.NavigationControlStyle.SMALL,position:
google.maps.ControlPosition.TOP_RIGHT},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapStyleZoomedOut = [{ featureType: "landscape",
elementType: "all",
stylers: [{ visibility: "off" }]
}];
var mapStyleZoomedIn = [{ featureType: "landscape",
elementType: "all",
stylers: [{ visibility: "off" }]
},{
featureType: "poi",
elementType: "all",
stylers: [{ visibility: "off" }]
}];
map = new google.maps.Map(document.getElementById("find-map"),
myOptions);
var styledMapOptions = {map: map};
var styleMapType = new google.maps.StyledMapType(mapStyle,
mapStyleZoomedOut);
map.mapTypes.set('minimial', styleMapType);
map.setMapTypeId('minimial');
google.maps.event.addListener(map, 'zoom_changed', function() {
// === IF Zoom Level <= 8 use mapStyleZoomedIn
// === If Zoom Level > 8 use mapStyleZoomedOut
});
提前致谢
最佳答案
使用 Google maps API V3 ,我从您的源代码中整理了一个测试示例(具有实际值以使测试正常进行)。
下面是我用来测试成功的代码,需要注意的主要代码在start()函数中。
var myOptions = {
zoom: 7,
center: new google.maps.LatLng(1,1),
disableDefaultUI: true,
navigationControl: true,
scrollwheel: false,
navigationControlOptions: {style: 'SMALL',position: 'TOP_RIGHT'},
mapTypeId: 'ROADMAP'
};
var mapStyleZoomedOut = [{ featureType: "landscape",
elementType: "all",
stylers: [{ visibility: "off" }]
}];
var mapStyleZoomedIn = [{ featureType: "landscape",
elementType: "all",
stylers: [{ visibility: "off" }]
},{
featureType: "poi",
elementType: "all",
stylers: [{ visibility: "off" }]
}];
function start()
{
map = new google.maps.Map(document.getElementById("find-map"), myOptions);
var styledMapOptions = {map: map, name: 'minimial'};
var styledMapOptions2 = {map: map, name: 'maximial'};
var sMapType = new google.maps.StyledMapType(mapStyleZoomedOut,styledMapOptions);
map.mapTypes.set('minimal', sMapType);
map.setMapTypeId('minimal');
var sMapType2 = new google.maps.StyledMapType(mapStyleZoomedIn,styledMapOptions2);
map.mapTypes.set('maximial', sMapType2);
google.maps.event.addListener(map, 'zoom_changed', function()
{
var zoomLevel = map.getZoom();
//DEBUG alert(zoomLevel+', '+map.getMapTypeId());
var sMapType;
// === IF Zoom Level <= 8 use mapStyleZoomedIn
if(zoomLevel <=8)
map.setMapTypeId('maximial');
// === If Zoom Level > 8 use mapStyleZoomedOut
else
map.setMapTypeId('minimal');
});
}
if (window.addEventListener)
window.addEventListener("load", start, false);
else if (window.attachEvent)
window.attachEvent("onload", start);
关于javascript - 谷歌地图 v3 : How to change the map style based on zoom level?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3121400/