我创建了一个自定义叠加层(显示用户图片的标记,而不是默认的气球)。基本上我遇到的问题是,当向地图添加多个标记时,只有最后添加的标记是可见的。这是代码:
function FaceMarker(latlng, userUid) {
console.log("face marker", userUid);
this._latlng = latlng;
this._userUid = userUid;
this._root = document.createElement('div');
this._root.style.position = 'absolute';
this._root.style.width = '60px';
this._root.style.height = '60px';
}
FaceMarker.prototype = new google.maps.OverlayView();
FaceMarker.prototype.onAdd = function() {
var img = document.createElement('img');
img.src = "/thumbs/" + this._userUid + "-60x60.jpg";
this._root.appendChild(img);
console.log(this.getPanes().overlayLayer);
this.getPanes().overlayLayer.appendChild(this._root);
};
FaceMarker.prototype.draw = function() {
var position = this.getProjection().fromLatLngToDivPixel(this._latlng);
var panes = this.getPanes();
panes.overlayLayer.style.left = position.x - 30 + 'px';
panes.overlayLayer.style.top = position.y - 120 + 'px';
};
FaceMarker.prototype.onRemove = function() {
this._root.parentNode.removeChild(this._root);
this._root = null;
};
// client code
var a = new FaceMarker(..., ...);
var b = new FaceMarker(..., ...);
a.setMap(myMap);
b.setMap(myMap); // only this one will be visible!!!
任何?我真的无法弄清楚为什么其他人没有出现。
TA