Google-Maps v3：如何根据缩放级别更改地图样式？ [英] Google-Maps v3: How to change the map style based on zoom level?
本文介绍了Google-Maps v3：如何根据缩放级别更改地图样式？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用新的Google Maps v3 STYLED 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缩放级别> 8使用mapStyleZoomedOut
}）;
预先致谢
解决方案
使用 Google地图API V3 ，我从你的源代码中汇集了一个测试例子（具有实际值以便使测试工作）。
以下是我用来成功测试的代码，
var myOptions = {
zoom：7，
center：new google.maps.LatLng（1,1），
disableDefaultUI：true，
navigationControl：true，
scrollwheel：false，
navigationControlOptions：{style ：'小'，位置：'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}]
}];
函数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使用mapStyleZoomedIn
if（zoomLevel< = 8 ）
map.setMapTypeId（'maximial'）;
// ===如果缩放级别> 8使用mapStyleZoomedOut
else
map.setMapTypeId（'minimal'）;
}）;
if（window.addEventListener）
window.addEventListener（load，start，false）;
else if（window.attachEvent）
window.attachEvent（onload，start）;
I am using the new Google Maps v3 STYLED MAP.
I want to change how the map is Styled based on the zoom level.
I have the following pseudo-code, how do change my map-style based on the zoom level?
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
});
Thanks in advance
解决方案
Using the Google maps API V3, I put together a test example from your source code (with actual values in order to make the test work).
Below is the code I used to test successfully, the main code to pay attention to is in the start() function.
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);
这篇关于Google-Maps v3：如何根据缩放级别更改地图样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
