当我使用带样式的Google地图时,它会忽略我设置的maxZoom和minZoom,完全删除缩放栏。如果我不包含StyledMapType,缩放限制将起作用。我错过了什么吗?或者StyledMapType不支持maxZoom / minZoom?
感谢您的帮助。
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new
google.maps.LatLng(29.45, -95.75),
zoom: 10
});
var style = [
{
featureType: 'all',
elementType: 'all',
stylers: [
{ saturation: -99 }
]
},
{
featureType: 'road.local',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'administrative.land_parcel',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
}
];
var styledMapType = new google.maps.StyledMapType(style, {
map: map,
name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
google.maps.event.addListenerOnce(map, "projection_changed", function(){
map.setMapTypeId('map-style');
layer_0 = new google.maps.FusionTablesLayer({
query: {
select: "col3",
from: "14XfhpSuNK0aSJkbnb5UFrsE1UPRE_wr4d9IwKjW7"
},
map: map,
styleId: 2,
templateId: 2
});
setZoomLimit(map, google.maps.StyledMapType);
setZoomLimit(map, google.maps.MapTypeId.ROADMAP);
setZoomLimit(map, google.maps.MapTypeId.HYBRID);
setZoomLimit(map, google.maps.MapTypeId.SATELLITE);
setZoomLimit(map, google.maps.MapTypeId.TERRAIN);
map.setMapTypeId(google.maps.StyledMapType);
});
layer_0 = new google.maps.StyledMapType({
query: {
select: "col3",
from: "14XfhpSuNK0aSJkbnb5UFrsE1UPRE_wr4d9IwKjW7"
},
map: map,
styleId: 2,
templateId: 2
});
}
function setZoomLimit(map, mapTypeId){
var mapTypeRegistry = map.mapTypes;
var mapType = mapTypeRegistry.get(mapTypeId);
mapType.maxZoom = 13;
mapType.minZoom = 8; }
答案 0 :(得分:0)
您的代码会在此行生成javascript错误:Uncaught TypeError: Cannot set property 'maxZoom' of undefined
:mapType.maxZoom = 13;
。没有google.maps.StyledMapType
。样式化地图的mapTypeId是" map-style"。您无法设置"未定义"的maxZoom属性。
这是不正确的,不知道它应该做什么,我认为没必要。
layer_0 = new google.maps.StyledMapType({
query: {
select: "col3",
from: "14XfhpSuNK0aSJkbnb5UFrsE1UPRE_wr4d9IwKjW7"
},
map: map,
styleId: 2,
templateId: 2
});
代码段
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new
google.maps.LatLng(29.45, -95.75),
zoom: 10
});
var style = [{
featureType: 'all',
elementType: 'all',
stylers: [{
saturation: -99
}]
}, {
featureType: 'road.local',
elementType: 'all',
stylers: [{
visibility: 'off'
}]
}, {
featureType: 'administrative.land_parcel',
elementType: 'all',
stylers: [{
visibility: 'off'
}]
}];
var styledMapType = new google.maps.StyledMapType(style, {
map: map,
name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
google.maps.event.addListenerOnce(map, "projection_changed", function() {
setZoomLimit(map, 'map-style');
setZoomLimit(map, google.maps.MapTypeId.ROADMAP);
setZoomLimit(map, google.maps.MapTypeId.HYBRID);
setZoomLimit(map, google.maps.MapTypeId.SATELLITE);
setZoomLimit(map, google.maps.MapTypeId.TERRAIN);
map.setMapTypeId('map-style');
});
layer_0 = new google.maps.FusionTablesLayer({
query: {
select: "col3",
from: "14XfhpSuNK0aSJkbnb5UFrsE1UPRE_wr4d9IwKjW7"
},
map: map,
styleId: 2,
templateId: 2
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function setZoomLimit(map, mapTypeId) {
var mapTypeRegistry = map.mapTypes;
var mapType = mapTypeRegistry.get(mapTypeId);
mapType.maxZoom = 13;
mapType.minZoom = 8;
}

html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
&#13;