Question

我有一张我正在制作的自定义地图，并且有两个完美显示的叠加层，可以通过按下按钮隐藏，然后显示。问题是，我想让地图加载隐藏的叠加层，并且只有在按下相应的按钮时才显示它们。我使用这个帖子Google Maps show/hide multiple overlays加上这里https://developers.google.com/maps/documentation/javascript/customoverlays的例子来实现这一目标，但是根本无法弄清楚如何使它的功能相反。

    <!DOCTYPE html>
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="maps.css">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
<title>AAPG Breach</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<script>
function CustomMapType() {
}
CustomMapType.prototype.tileSize = new google.maps.Size(256,256);
CustomMapType.prototype.maxZoom = 7;
CustomMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
    var div = ownerDocument.createElement('DIV');
    var baseURL = '/maps/bdx_breach/';
    baseURL += zoom + '_' + coord.x + '_' + coord.y + '.png';
    div.style.width = this.tileSize.width + 'px';
    div.style.height = this.tileSize.height + 'px';
    div.style.backgroundColor = '#222222';
    div.style.backgroundImage = 'url(' + baseURL + ')';
    return div;
};

CustomMapType.prototype.name = "Custom";
CustomMapType.prototype.alt = "Tile Coordinate Map Type";
var map;

var CustomMapType = new CustomMapType();

        var overlays = [];
        var boundsArray = [];
AAPGOverlay.prototype = new google.maps.OverlayView();

function initialize() {
  var mapOptions = {
      minZoom: 2,
    maxZoom: 7,
    isPng: true,
      mapTypeControl: false,
      streetViewControl: false,
        center: new google.maps.LatLng(80,-160),     
      zoom: 3,
    mapTypeControlOptions: {
      mapTypeIds: ['custom', google.maps.MapTypeId.ROADMAP],
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }
  };
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
map.mapTypes.set('custom',CustomMapType);
map.setMapTypeId('custom');


  var swBound = new google.maps.LatLng(80.03238, -169.90);
  var neBound = new google.maps.LatLng(80.70, -163.50);
  var swBound2 = new google.maps.LatLng(83.35, -163.35);
  var neBound2 = new google.maps.LatLng(84.41, -153.35);
  var bounds = new google.maps.LatLngBounds(swBound, neBound);
  var bounds2 = new google.maps.LatLngBounds(swBound2, neBound2);
  boundsArray.push(bounds);
  boundsArray.push(bounds2);

  var srcImage = '/maps/bdx_breach/breach_alpha_spawn.png';
  var srcImage2 = '/maps/bdx_breach/breach_bravo_spawn.png';
  overlays.push(new AAPGOverlay(bounds, srcImage, map));
  overlays.push(new AAPGOverlay(bounds2, srcImage2, map));
}


function AAPGOverlay(bounds, image, map) {

  // Initialize all properties.
  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;

  // Define a property to hold the image's div. We'll
  // actually create this div upon receipt of the onAdd()
  // method so we'll leave it null for now.
  this.div_ = null;

  // Explicitly call setMap on this overlay.
  this.setMap(map);
}


/**
 * onAdd is called when the map's panes are ready and the overlay has been
 * added to the map.
 */
AAPGOverlay.prototype.onAdd = function() {

  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';

  // Create the img element and attach it to the div.
  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  img.style.position = 'absolute';
  div.appendChild(img);

  this.div_ = div;

  // Add the element to the "overlayLayer" pane.
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
};
// [END region_attachment]

// [START region_drawing]
AAPGOverlay.prototype.draw = function() {

  // We use the south-west and north-east
  // coordinates of the overlay to peg it to the correct position and size.
  // To do this, we need to retrieve the projection from the overlay.
  var overlayProjection = this.getProjection();

  // Retrieve the south-west and north-east coordinates of this overlay
  // in LatLngs and convert them to pixel coordinates.
  // We'll use these coordinates to resize the div.
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

  // Resize the image's div to fit the indicated dimensions.
  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';
};        

        AAPGOverlay.prototype.onRemove = function() {
            this.div_.parentNode.removeChild(this.div_);
            //this.div_ = null;
            };

        AAPGOverlay.prototype.hide = function() {
            if (this.div_) {
                this.div_.style.visibility = "hidden";
                }
            };

        AAPGOverlay.prototype.show = function() {
            if (this.div_) {
                this.div_.style.visibility = "visible";
                }
            };

        AAPGOverlay.prototype.toggle = function() {
            if (this.div_) {
                if (this.div_.style.visibility == 'hidden') {
                    this.show();
                } else {
                    this.hide();
                }
            }
        };


google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head> 
<body> 

<div id="toggle">
<input type="button" class="toggle" value="Alpha Spawn" onclick="overlays[0].toggle();"></input></br>
  <input type="button" class="toggle" value="Bravo Spawn" onclick="overlays[1].toggle();"></input>
</div>

<div id="map_canvas" style="background: #222222;"></div> 
</body>
</html>

Answer 1

在您将图像添加到其中之后，您永远不会告诉div被隐藏。就像在您的功能中一样。

你现在的方式是：

// Create the img element and attach it to the div.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
div.appendChild(img);

您可以在结尾处添加：

div.style.visibility = "hidden"

您稍后会在通话中执行此操作，但不会在开始时执行此操作。

默认情况下，Google地图会显示/隐藏多个叠加层

1 个答案: