是否可以隐藏（切换）主地图图层并仅显示地面叠加图像本身？ [英] Is it possible to hide(toggle) the main map layer and display only the ground overlay image itself?

问题描述

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

I have a groundOverlay image and i want that the main map can be switched on/off so that only the overlay image can be displayed. is that possible?

PS：我正在使用javascript api v3。

PS: I am using the javascript api v3.

推荐答案

你可以实现一个自定义的MapType（它不呈现Tiles），那么你只需要在这个自定义的MapType和一个内置的MapType（例如ROADMAP）之间切换：

You may implement a custom MapType(which doesn't render Tiles), then you only need to toggle between this custom MapType and a built-in MapType(e.g. 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>

这篇关于是否可以隐藏（切换）主地图图层并仅显示地面叠加图像本身？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！