maxZoom和样式谷歌Fusion地图

时间:2015-08-21 02:07:28

标签: javascript google-maps google-maps-api-3 google-fusion-tables google-maps-styled

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

1 个答案:

答案 0 :(得分:0)

  1. 您的代码会在此行生成javascript错误:Uncaught TypeError: Cannot set property 'maxZoom' of undefinedmapType.maxZoom = 13;。没有google.maps.StyledMapType。样式化地图的mapTypeId是" map-style"。您无法设置"未定义"的maxZoom属性。

  2. 这是不正确的,不知道它应该做什么,我认为没必要。

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

    working fiddle

    代码段

    
    
    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;
    &#13;
    &#13;