javascript - 覆盖图像覆盖自定义 Google map 网络中的标记

Question

我正在开发一个网络应用程序。我添加了地面覆盖层和标记，但令人惊讶地发现地面覆盖层覆盖了标记。有人可以帮我吗？

Javascript代码在这里:jsfiddle.net/jocelynwang205/FNyuN/

代码(来自 fiddle ):

  var overlay;
  USGSOverlay.prototype = new google.maps.OverlayView();
  function initialize() {
    var mapOptions = {
      zoom: 18,
      center: new google.maps.LatLng(31.319690, 121.488916)
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
        var foodimage = {
      //url: 'http://images3.wikia.nocookie.net/__cb20110131222438/uncyclopedia/images/1/1f/Totoro.gif',
      //url: 'http://static.tumblr.com/rjvtkdi/IVZn0j26r/food.png',
      url: 'http://static.tumblr.com/rjvtkdi/5pRn0j2h5/food2.png',
      scaledSize: new google.maps.Size(80, 80),
      origin: new google.maps.Point(0,0),
      anchor: new google.maps.Point(0, 32)
    };
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(31.319023, 121.489563),
      map: map,
      title: '食堂',
     icon: foodimage,
     zindex: 10,
     animation: google.maps.Animation.DROP
    });

    var contentString = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading" >ʳÌÃ</h1>'+
        '<div id="bodyContent">'+
        '<p id="infotext"><b>ʳÌÃ</b>, ÓÐÌײ͡¢¸Ç½½·¹¡¢Ò¹Ïü</p>'+
        '<iframe height="350" width="500" frameborder="0" src="http://photosynth.net/preview/embed/4e3e6c04-6fa0-46fd-9278-044a7a92cc14?delayload=true&autoplay=true"></iframe>'+
        '</div>'+
        '</div>';

  var myOptions = {
       content: contentString
      ,disableAutoPan: false
      ,maxWidth: 0
      ,pixelOffset: new google.maps.Size(-140, 0)
      ,zIndex: null
      ,boxStyle: { 
        background: "url('infoboxbg.jpg') repeat"
        ,padding: "10px"
        ,opacity: 0.97
       }
      ,closeBoxMargin: "6px 6px 2px 2px"
      ,closeBoxURL: "closeicon3.png"
      ,infoBoxClearance: new google.maps.Size(1, 1)
      ,isHidden: false
      ,pane: "floatPane"
      ,enableEventPropagation: false
    };;

  var infowindow = new google.maps.InfoWindow({
        content: contentString
  });

    google.maps.event.addListener(marker, 'click', function() {
      //infowindow.open(map,marker);

      var ib = new InfoBox(myOptions);
      ib.open(map, marker)
    });

    var swBound = new google.maps.LatLng(31.317279, 121.487516);
    var neBound = new google.maps.LatLng(31.320549, 121.491384);
    var bounds = new google.maps.LatLngBounds(swBound, neBound);

    var srcImage = 'http://static.tumblr.com/rjvtkdi/ioCn0j4kk/handmap.jpg';
    overlay = new USGSOverlay(bounds, srcImage, map);

    function toggleBounce() {
   // window.alert('Clicked and bounce')
    if (marker.getAnimation() != null) {
      marker.setAnimation(null);
    } else {
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
    }

    function stopBounce() {
      marker.setAnimation(null);
    }


   google.maps.event.addListener(marker, 'mouseover', toggleBounce);
    google.maps.event.addListener(marker, 'mouseout', stopBounce);
  }
   /** @constructor */
  function USGSOverlay(bounds, image, map) {

    // Now 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.
   */
  USGSOverlay.prototype.onAdd = function() {

    var div = document.createElement('div');
    div.style.border = '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%';
    div.appendChild(img);

    this.div_ = div;

    // Add the element to the "overlayImage" pane.
    var panes = this.getPanes();
    panes.overlayImage.appendChild(this.div_);
  };

  USGSOverlay.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';
  };

  USGSOverlay.prototype.onRemove = function() {
    this.div_.parentNode.removeChild(this.div_);
  };

  // Set the visibility to 'hidden' or 'visible'.
  USGSOverlay.prototype.hide = function() {
    if (this.div_) {
      // The visibility property must be a string enclosed in quotes.
      this.div_.style.visibility = 'hidden';
    }
  };

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

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

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

Answer 1

叠加层不是 GroundOverlay ，GroundOverlays 将被放置到 overlayLayer Pane 中，该 Pane 的级别低于 overlayImage Pane (将放置标记的位置)，一个 GroundOverlay code> 可能永远不会覆盖标记。

您已经创建了 custom Overlay并将其放入 overlayImage Pane 中(与放置标记的 Pane 相同)。您的叠加层将覆盖 zIndex 较低的标记(或者当 zIndex 相等时放置在叠加层之前的标记)。

您可以:

1. 按照 Rob Quincey 的建议设置 zIndex
2. 使用真实的GroundOverlay
3. 将叠加层放入 overlayLayer Pane