maxZoom 和风格化的 Google Fusion 地图

Question

当我使用样式化的 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; }

Answer 1

1. 您的代码生成 javascript 错误：Uncaught TypeError: Cannot set property 'maxZoom' of undefined 在此行：mapType.maxZoom = 13;。没有google.maps.StyledMapType。您的样式地图的 mapTypeId 是“地图样式”。不能设置“未定义”的 maxZoom 属性。

2. 这是不正确的，不知道应该怎么做，我觉得没必要。

layer_0 = new google.maps.StyledMapType({
  query: {
    select: "col3",
    from: "14XfhpSuNK0aSJkbnb5UFrsE1UPRE_wr4d9IwKjW7"
  },
  map: map,
  styleId: 2,
  templateId: 2
});

working fiddle

代码 sn-p：

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>