Google地图显示/隐藏多个叠加层

问题描述

我想要的是，地图上有2个自定义叠加层，能够使用两个按钮分别显示/隐藏两个叠加层。目前，我有1个可以用按钮显示/隐藏的叠加层，但是我无法在地图上显示第二个叠加层。 对我来说不起作用，虽然我的代码如下所示：

What I would like, are 2 custom overlays on a map, with the ability to show/hide both overlays separately using two buttons. Currently, I have 1 overlay that can be shown/hid with a button, but I cannot get the second overlay on the map. This suggestion doesn't work for me (yet), while my code looks like this:

<script>

        var overlay;

        SchipholOverlay.prototype = new google.maps.OverlayView();

        function initialize()
        {
            var mapProp = { //set map properties
                    center:new google.maps.LatLng(52.309213,4.762316),
                    zoom:16,
                    mapTypeId:google.maps.MapTypeId.HYBRID
                    };

            //create map variable with properties       
            var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);

            var swBound = new google.maps.LatLng(52.299000,4.759711);
            var neBound = new google.maps.LatLng(52.313400,4.786885);
            var swBound2 = new google.maps.LatLng(52.299000,4.759711);
            var neBound2 = new google.maps.LatLng(52.283400,4.782885);
            var bounds = new google.maps.LatLngBounds(swBound, neBound);
            var bounds2 = new google.maps.LatLngBounds(swBound2, neBound2);

            // Insert overlay image here
            var srcImage = 'departures_gates.gif';
            var srcImage2 = 'arrivalsdepartures2.gif';
            overlay = new SchipholOverlay(bounds, srcImage, map);
            overlay = new SchipholOverlay(bounds2, scrImage2, map);

        }

        function SchipholOverlay(bounds, image, map) {

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

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

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


        SchipholOverlay.prototype.onAdd = function() {

          // Note: an overlay's receipt of onAdd() indicates that
          // the map's panes are now available for attaching
          // the overlay to the map via the DOM.

          // Create the DIV and set some basic attributes.
          var div = document.createElement('div');
          div.style.borderStyle = 'none';
          div.style.borderWidth = '0px';
          div.style.position = 'absolute';

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

          // Set the overlay's div_ property to this DIV
          this.div_ = div;

          // We add an overlay to a map via one of the map's panes.
          // We'll add this overlay to the overlayLayer pane.
          var panes = this.getPanes();
          panes.overlayLayer.appendChild(div);
        }

        SchipholOverlay.prototype.draw = function() {

          // Size and position the overlay. We use a southwest and northeast
          // position of the overlay to peg it to the correct position and size.
          // We need to retrieve the projection from this overlay to do this.
          var overlayProjection = this.getProjection();

          // Retrieve the southwest and northeast coordinates of this overlay
          // in latlngs and convert them to pixels 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';
        }

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

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

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

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

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

html：

<div id ="panel">
        <input type="button" value="Toggle Visibility" onclick="overlay.toggle();"></input>
     </div>
    <div class="map" id="googleMap" style="width:1600px;height:800px;"></div>

任何帮助都将不胜感激！

Any help would be greatly appreciated!

推荐答案

保持对每个叠加层的唯一引用（如链接问题中所示）。

Keep a unique reference to each overlay (as suggested in the linked question).

而不是此（覆盖参考）到第一个）：

Instead of this (which overwrites the reference to the first):

        overlay = new SchipholOverlay(bounds, srcImage, map);
        overlay = new SchipholOverlay(bounds2, srcImage2, map);

给他们提供唯一的名称或将它们推送到数组：

Give them unique names or push them onto an array:

        // in the global scope
        var overlays = [];

        overlays.push(new SchipholOverlay(bounds, srcImage, map));
        overlays.push(new SchipholOverlay(bounds2, srcImage2, map));

注意：scrImage2似乎是一个错字。

Note: scrImage2 seems to be a typo.

  <input type="button" value="Toggle Visibility 1" onclick="overlays[0].toggle();"></input>
  <input type="button" value="Toggle Visibility 2" onclick="overlays[1].toggle();">

（无图像）

这篇关于Google地图显示/隐藏多个叠加层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！