我正在开发一个网络应用。我添加了一个地面覆盖和一个标记，但令人惊讶地发现地面覆盖覆盖了标记。有人可以帮助我吗？
Javascript代码在这里：jsfiddle.net/jocelynwang205/FNyuN /
代码（来自小提琴）：
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);
答案 0 :(得分：1)
叠加层不是GroundOverlay，GroundOverlays将放置在overlayLayer - 窗格中，其窗格低于overlayImage - 窗格（放置标记的位置）， GroundOverlay可能永远不会覆盖标记。
您已创建custom Overlay并将其放入overlayImage - 窗格（放置标记的同一窗格）。您的叠加层将覆盖zIndex较低的标记（或zIndex相等时放置在叠加层之前的标记）。
您可以：
zIndex GroundOverlay overlayLayer - 窗格