谷歌地图地图类型界面中maxZoom属性的用途

Purpose of maxZoom property in Google Maps MapType interface?

本文关键字:属性 maxZoom 地图 类型 界面 谷歌地图      更新时间:2023-09-26

Google maps API Guide 详细介绍了 MapTypes 接口,对"必需"属性进行了以下说明:

maxZoom(必需)指定最大缩放级别 显示此地图类型的磁贴。

但是,在谷歌给出的例子中:

https://developers.google.com/maps/documentation/javascript/examples/maptype-base

甚至不包括 maxZoom 属性。

如果修改代码以包含 maxZoom 属性(如下所示),则该属性不起作用 - 应该吗?一些澄清会很好...

<!DOCTYPE html>
<html>
<head>
   <title>Overlay map types</title>
   <style>
      html, body, #map-canvas {
         height: 100%;
         margin: 0px;
         padding: 0px;
      }
   </style>
   <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
   <script>
      /** @constructor */
      function CoordMapType(tileSize) {
         this.tileSize = tileSize;
         this.maxZoom = 12;   // <--- THIS HAS NO EFFECT ??
      }
      CoordMapType.prototype.getTile = function (coord, zoom, ownerDocument) {
         var div = ownerDocument.createElement('div');
         div.innerHTML = coord.toString() +  '<br>zoom: ' + zoom.toString();
         div.style.width = this.tileSize.width + 'px';
         div.style.height = this.tileSize.height + 'px';
         div.style.fontSize = '10';
         div.style.borderStyle = 'solid';
         div.style.borderWidth = '1px';
         div.style.borderColor = '#AAAAAA';
         return div;
      };
      var map;
      var chicago = new google.maps.LatLng(41.850033, -87.6500523);
      function initialize() {
         var mapOptions = {
            zoom: 10,
            center: chicago
         };
         map = new google.maps.Map(document.getElementById('map-canvas'),
                                           mapOptions);
         // Insert this overlay map type as the first overlay map type at
         // position 0. Note that all overlay map types appear on top of
         // their parent base map.
         map.overlayMapTypes.insertAt( 0, new CoordMapType(new google.maps.Size(256, 256)));
      }
      google.maps.event.addDomListener(window, 'load', initialize);
   </script>
</head>
<body>
   <div id="map-canvas"></div>
</body>
</html>

发现这隐藏在 Google 地图文档中标题为"MapType 对象规范"的部分中......

最大变焦类型:数字

显示此地图类型时地图的最大缩放级别。 对于基本映射类型是必需的,对于覆盖映射类型忽略。

因此,覆盖 MapType 不需要 maxZoom 属性;这与我的原始代码示例中的行为相对应。

如果您更改了mapType对象的属性(maxZoomminZoom等...),则只有在地图类型更改为该mapType之后,更改的效果才会出现。

例如,如果当前mapTypeTERRAIN,并且您更改了TERRAIN's maxZoom, maxZoom只有在将mapType更改为另一种类型(例如 ROADMAP,HYBRID,etc..),回到TERRAIN

不要设置mapType的maxZoom选项,而是使用核心map的maxZoom选项。为"maptypeid_changed"事件添加监听器,当事件发生时,更改map maxZoom选项:

google.maps.event.addListener(map, 'maptypeid_changed', function(event){
if( map.getMapTypeId() === google.maps.MapTypeId.TERRAIN ){
    map.setOptions({maxZoom:/*For example*/5});
}else 
if( map.getMapTypeId() === google.maps.MapTypeId.ROADMAP ){
    map.setOptions({maxZoom:/*For example*/8});
}//Etc...
else{
    map.setOptions({maxZoom:/*For example*/21});
}
});