基于googleMap API v3 的PopupMarker

PopupMarker.prototype = new google.maps.OverlayView();
function PopupMarker(opts) {
    this.ICON_WIDTH = 28;//图标的宽
    this.ICON_HEIGHT = 28;//图标的高
    this.map_ = opts.map;//地图对象
    this.latlng_ = opts.position;
    this.icon_ = opts.icon;
    this.text_ = opts.text || "";
    this.setMap(this.map_);
    this.showpop = opts.showpop || false;
    var agt = navigator.userAgent.toLowerCase();
    var is_ie_ = ((agt.indexOf("msie") !== -1) && (agt.indexOf("opera") === -1));
    var yPos = 0;
    this.popupImgSrc_ = "images/1280.png";
    this.popupTbl = {};
    this.popupTbl.leftTop = {
        "left": 0,
        "top": yPos,
        "width": 19,
        "height": 7
    };
    this.popupTbl.leftTopFill = {
        "left": 16,
        "top": 3,
        "width": 4,
        "height": 4
    };
    this.popupTbl.rightTop = {
        "left": 19,
        "top": yPos,
        "width": 10,
        "height": 7
    };
    this.popupTbl.rightTopImg = {
        "left": -125,
        "top": 0,
        "width": 10,
        "height": 7
    };
    this.popupTbl.centerTopFill = {
        "left": 19,
        "top": yPos,
        "width": 0,
        "height": 7
    };
    yPos += this.popupTbl.leftTop.height;
    this.popupTbl.leftBody = {
        "left": 11,
        "top": yPos,
        "width": 8,
        "height": 0
    };
    this.popupTbl.centerBodyFill = {
        "left": 19,
        "top": yPos,
        "width": 40,
        "height": 15
    };
    this.popupTbl.rightBody = {
        "left": 19,
        "top": yPos,
        "width": 9,
        "height": 0
    };
    this.popupTbl.leftBottom = {
        "left": 0,
        "top": yPos,
        "width": 20,
        "height": 21
    };
    this.popupTbl.leftBottomImg = {
        "left": 0,
        "top": -13,
        "width": 20,
        "height": 21
    };
    this.popupTbl.leftBottomFill = {
        "left": 16,
        "top": 0,
        "width": 4,
        "height": 6
    };
    this.popupTbl.rightBottom = {
        "left": 19,
        "top": yPos,
        "width": 10,
        "height": 7
    };
    this.popupTbl.rightBottomImg = {
        "left": -125,
        "top": -13,
        "width": 10,
        "height": 7
    };
    this.popupTbl.centerBottomFill = {
        "left": 19,
        "top": (yPos + (is_ie_ ? -1: 0)),
        "width": 0,
        "height": (6 + (is_ie_ ? 1: 0))
    };

};

PopupMarker.prototype.onAdd = function() {
    this.container_ = document.createElement("div");
    this.iconContainer = document.createElement("div");
    this.iconContainer.style.width = this.ICON_WIDTH + "px";
    this.iconContainer.style.height = this.ICON_HEIGHT + "px";
    this.iconContainer.innerHTML = "<img src='" + this.icon_ + "'>";
    var panes = this.getPanes();
    panes.floatShadow.appendChild(this.iconContainer);
    this.iconContainer.style.position = "absolute";
    panes.floatPane.appendChild(this.container_);
    this.container_.style.position = "absolute";
    if (!this.showpop) this.container_.style.visibility = "hidden";
    this.makeNormalPopup_();
};
PopupMarker.prototype.draw = function() {
    this.redrawNormalPopup_(this.text_);
};
PopupMarker.prototype.onRemove = function() {
    this.container_.parentNode.removeChild(this.container_);
    this.iconContainer.parentNode.removeChild(this.iconContainer);
};

PopupMarker.prototype.makeNormalPopup_ = function() {
    this.leftTop_ = this.makeImgDiv_(this.popupImgSrc_, this.popupTbl.leftTop);
    this.leftTop_.appendChild(this.fillDiv_(this.popupTbl.leftTopFill));
    this.container_.appendChild(this.leftTop_);
    this.leftBody_ = this.fillDiv_(this.popupTbl.leftBody);
    this.leftBody_.style.borderWidth = "0 0 0 1px";
    this.leftBody_.style.borderStyle = "none none none solid";
    this.leftBody_.style.borderColor = "#000000";
    this.container_.appendChild(this.leftBody_);
    this.leftBottom_ = this.makeImgDiv_(this.popupImgSrc_, this.popupTbl.leftBottomImg);
    this.leftBottom_.style.left = this.popupTbl.leftBottom.left + "px";
    this.leftBottom_.style.top = this.popupTbl.leftBottom.top + "px";
    this.leftBottom_.style.width = this.popupTbl.leftBottom.width + "px";
    this.leftBottom_.style.height = this.popupTbl.leftBottom.height + "px";
    this.leftBottom_.appendChild(this.fillDiv_(this.popupTbl.leftBottomFill));
    this.container_.appendChild(this.leftBottom_);
    this.bodyContainer_ = document.createElement("div");
    this.bodyContainer_.style.position = "absolute";
    this.bodyContainer_.style.backgroundColor = "#FFF";
    this.bodyContainer_.style.overflow = "hidden";
    this.bodyContainer_.style.left = this.popupTbl.centerBodyFill.left + "px";
    this.bodyContainer_.style.top = this.popupTbl.centerBodyFill.top + "px";
    this.bodyContainer_.style.width = this.popupTbl.centerBodyFill.width + "px";
    this.bodyContainer_.style.height = this.popupTbl.centerBodyFill.height + "px";
    this.container_.appendChild(this.bodyContainer_);
    this.rightTop_ = this.makeImgDiv_(this.popupImgSrc_, this.popupTbl.rightTopImg);
    this.rightTop_.style.left = this.popupTbl.rightTop.left + "px";
    this.rightTop_.style.top = this.popupTbl.rightTop.top + "px";
    this.rightTop_.style.width = this.popupTbl.rightTop.width + "px";
    this.rightTop_.style.height = this.popupTbl.rightTop.height + "px";
    this.container_.appendChild(this.rightTop_);
    this.rightBottom_ = this.makeImgDiv_(this.popupImgSrc_, this.popupTbl.rightBottomImg);
    this.rightBottom_.style.left = this.popupTbl.rightBottom.left + "px";
    this.rightBottom_.style.top = this.popupTbl.rightBottom.top + "px";
    this.rightBottom_.style.width = this.popupTbl.rightBottom.width + "px";
    this.rightBottom_.style.height = this.popupTbl.rightBottom.height + "px";
    this.container_.appendChild(this.rightBottom_);
    this.rightBody_ = this.fillDiv_(this.popupTbl.rightBody);
    this.rightBody_.style.borderWidth = "0 1px 0 0";
    this.rightBody_.style.borderStyle = "none solid none none";
    this.rightBody_.style.borderColor = "#000000";
    this.container_.appendChild(this.rightBody_);
    this.centerBottom_ = this.fillDiv_(this.popupTbl.centerBottomFill);
    this.centerBottom_.style.borderWidth = "0 0 1px 0";
    this.centerBottom_.style.borderStyle = "none none solid none";
    this.centerBottom_.style.borderColor = "#000000";
    this.container_.appendChild(this.centerBottom_);
    this.centerTop_ = this.fillDiv_(this.popupTbl.centerTopFill);
    this.centerTop_.style.borderColor = "#000000";
    this.centerTop_.style.borderWidth = "1px 0 0 0";
    this.centerTop_.style.borderStyle = "solid none none none";
    this.container_.appendChild(this.centerTop_);

};
PopupMarker.prototype.redrawNormalPopup_ = function(text) {
    if (this.beforeNormalPopupText_ !== text) {
        try {
            while (this.bodyContainer_.firstChild) {
                this.bodyContainer_.removeChild(this.bodyContainer_.firstChild);
            }
        } catch(e) {}
        this.bodyContainer_.innerHTML = text;
        if (this.isIE_() === false && this.bodyContainer_.hasChildNodes) {
            if (this.bodyContainer_.firstChild.nodeType === 1) {
                this.bodyContainer_.firstChild.style.margin = 0;
            }
        }
        var offsetBorder = this.isIE_() ? 2: 0;
        var cSize = this.getHtmlSize_(text);
        var rightX = this.popupTbl.leftTop.width + cSize.width;
        this.leftBottom_.style.top = (cSize.height + this.popupTbl.leftBody.top) + "px";
        this.leftBody_.style.height = cSize.height + "px";
        this.bodyContainer_.style.width = cSize.width + "px";
        this.bodyContainer_.style.height = cSize.height + "px";
        this.bodyContainer_.style.top = this.popupTbl.leftBody.top;
        this.rightTop_.style.left = rightX + "px";
        this.rightBottom_.style.left = this.rightTop_.style.left;
        this.rightBottom_.style.top = this.leftBottom_.style.top;
        this.rightBody_.style.left = rightX + "px";
        this.rightBody_.style.height = this.leftBody_.style.height;
        this.centerBottom_.style.top = this.leftBottom_.style.top;
        this.centerBottom_.style.width = cSize.width + "px";
        this.centerTop_.style.width = cSize.width + "px";
        this.size_ = {
            "width": (rightX + this.popupTbl.rightTop.width),
            "height": (cSize.height + this.popupTbl.leftTop.height + this.popupTbl.leftBottom.height)
        };
        this.container_.style.width = this.size_.width + "px";
        this.container_.style.height = this.size_.height + "px";
    }
    this.setPosition(this.latlng_);
    this.beforeNormalPopupText_ = text;
};
PopupMarker.prototype.setPosition = function(latlng) {
    var pxPos = this.getProjection().fromLatLngToDivPixel(latlng);
    this.container_.style.left = pxPos.x + "px";
    this.container_.style.top = (pxPos.y - this.size_.height) + "px";
    this.iconContainer.style.left = (pxPos.x - this.ICON_WIDTH / 2) + "px";
    this.iconContainer.style.top = (pxPos.y - this.ICON_HEIGHT) + "px";
};

PopupMarker.prototype.isNull = function(value) {
    if (!value && value !== 0 || value === undefined || value === "" || value === null || typeof value === "undefined") {
        return true;
    }
    return false;
};
PopupMarker.prototype.getHtmlSize_ = function(html) {
    var mapContainer = this.map_.getDiv();
    var onlineHTMLsize_ = function(text) {
        var dummyTextNode = document.createElement("span");
        dummyTextNode.innerHTML = text;
        dummyTextNode.style.display = "inline";
        mapContainer.appendChild(dummyTextNode);
        var size = {};
        size.width = dummyTextNode.offsetWidth;
        size.height = dummyTextNode.offsetHeight;
        mapContainer.removeChild(dummyTextNode);
        return size;

    };
    var ret;
    var lines = html.split(/\n/i);
    var totalSize = new google.maps.Size(1, 1);
    for (var i = 0; i < lines.length; i++) {
        ret = onlineHTMLsize_(lines[i]);
        totalSize.width += ret.width;
        totalSize.height += ret.height;

    }
    return totalSize;

};
PopupMarker.prototype.makeImgDiv_ = function(imgSrc, params) {
    var imgDiv = document.createElement("div");
    imgDiv.style.position = "absolute";
    imgDiv.style.overflow = "hidden";
    if (params.width) {
        imgDiv.style.width = params.width + "px";
    }
    if (params.height) {
        imgDiv.style.height = params.height + "px";
    }
    var img = null;
    if (this.isIE_() === false) {
        img = new Image();
        img.src = imgSrc;

    } else {
        img = document.createElement("div");
        if (params.width) {
            img.style.width = params.width + "px";

        }
        if (params.height) {
            img.style.height = params.height + "px";

        }

    }
    img.style.position = "relative";
    img.style.left = params.left + "px";
    img.style.top = params.top + "px";
    img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgSrc + "')";
    imgDiv.appendChild(img);
    return imgDiv;

};
PopupMarker.prototype.fillDiv_ = function(params) {
    var bgDiv = document.createElement("div");
    bgDiv.style.position = "absolute";
    bgDiv.style.backgroundColor = "#FFF";
    bgDiv.style.fontSize = "1px";
    bgDiv.style.lineHeight = "1px";
    bgDiv.style.overflow = "hidden";
    bgDiv.style.left = params.left + "px";
    bgDiv.style.top = params.top + "px";
    bgDiv.style.width = params.width + "px";
    bgDiv.style.height = params.height + "px";
    return bgDiv;
};
PopupMarker.prototype.isIE_ = function() {
    return (navigator.userAgent.toLowerCase().indexOf('msie') !== -1) ? true: false;
};
PopupMarker.prototype.hide = function() {
    if (this.container_) {
        this.container_.style.visibility = "hidden";
    }
};
PopupMarker.prototype.show = function() {
    if (this.container_) {
        this.container_.style.visibility = "visible";
    }
};
PopupMarker.prototype.toggle = function() {
    if (this.container_) {
        if (this.container_.style.visibility == "hidden") {
            this.show();
        } else {
            this.hide();
        }
    }
};
PopupMarker.prototype.update = function(obj) {
    if ((typeof obj.icon) != "undefined") {
        this.iconContainer.innerHTML = "<img src='" + obj.icon + "'>";

    }
    if ((typeof obj.position) != "undefined") {
        this.latlng_ = obj.position;
        this.setPosition(this.latlng_);

    }
    if ((typeof obj.text) != "undefined") {
        this.text_ = obj.text;
        this.redrawNormalPopup_(obj.text);

    }

};
PopupMarker.prototype.setZIndex = function(index) {
    this.container_.style.zIndex = index;
    this.iconContainer.style.zIndex = index;
};
PopupMarker.prototype.latlng = function() {
    return this.latlng_;
}
PopupMarker.prototype.hideMarker = function(){
	this.container_.style.visibility = "hidden";
    this.iconContainer.style.visibility = "hidden";
};
PopupMarker.prototype.showMarker = function(){
	this.container_.style.visibility = "visible";
    this.iconContainer.style.visibility = "visible";
};
//效果见http://www.gpsoo.net 或者 http://www.goocar.net