javascript - 是否可以隐藏(切换)主 map 层并仅显示地面覆盖图像本身？

Question

我有一个 groundOverlay 图像，我希望可以打开/关闭主 map ，以便只显示叠加图像。那可能吗？

PS:我使用的是 javascript api v3。

Answer 1

您可以实现一个自定义 MapType(不渲染 Tiles)，然后您只需要在这个自定义 MapType 和一个内置 MapType(例如 ROADMAP)之间切换:

function initialize() {
  var goo = google.maps,
    map = new goo.Map(document.getElementById('map-canvas'), {
      zoom: 11,
      center: new goo.LatLng(40.740, -74.18),
      mapTypeControl: false

    }),

    mt = function() {
      this.getTile = function() {
        var n = document.createElement('div');
        n.style.cssText = 'background:#fff;width:256px;height:256px;';
        return n;
      };
      this.tileSize = new google.maps.Size(256, 256);
      this.maxZoom = 20;
    },
    //maptype-control
    mtc = document.createElement('div');

  mtc.id = 'mtc';
  map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(mtc);

  google.maps.event.addDomListener(mtc, 'click', function() {
    console.log(map.getMapTypeId())
    map.setMapTypeId((map.getMapTypeId() === 'hidden') ? google.maps.MapTypeId.ROADMAP : 'hidden');
  });
  google.maps.event.addListener(map, 'maptypeid_changed', function() {
    mtc.style.textDecoration = ((this.getMapTypeId() === 'hidden') ? 'none' : 'line-through');
  });

  map.mapTypes.set('hidden', new mt);
  map.setMapTypeId('hidden');

  new goo.GroundOverlay(
    'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    new goo.LatLngBounds(
      new goo.LatLng(40.712216, -74.22655),
      new goo.LatLng(40.773941, -74.12544)
    ), {
      map: map
    }
  );

}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
#mtc {
  border: 1px solid #000;
  background: tomato;
  padding: 2px;
  margin: 4px;
  cursor: pointer;
  font-size: 1.4em;
  font-weight: bold;
  border-radius:2px;
}
#mtc:after {
  content: 'Tiles';
}

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas"></div>