打造开源安全信息管理平台-Ossim

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