// 复杂的自定义覆盖物
function MyFocus(point) {
this.point = point;
//this._text = text;
}
var m_map;
继承API的BMap.Overlay
MyFocus.prototype = new BMap.Overlay();
//实现初始化方法
MyFocus.prototype.initialize = function (map) {
m_map = map;
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this.point.lat);
div.className = "point";
var divChild = document.createElement("div");
divChild.className = "focus";
div.appendChild(divChild);
divChild.style.position = "absolute";
if (this._clickFun) {
div.onclick = this._clickFun;
}
if (this._mouseOverFun) {
div.onmouseover = this._mouseOverFun;
}
//将div添加到覆盖物容器中
map.getPanes().markerMouseTarget.appendChild(div);
return div;
}
//实现绘制方法
MyFocus.prototype.draw = function () {
var map = this._map;
var tzoom = map.getZoom();
//根据地理坐标转换为像素坐标,并设置容器
var pixel = map.pointToOverlayPixel(this.point);
this._div.style.left = pixel.x - 32 + "px";
this._div.style.top = pixel.y - 32 + "px";
}
//信息窗口
MyFocus.prototype.openWindow = function () {
var sContent =
"<h4 style=’margin:0 0 5px 0;padding:0.2em 0′>天安门</h4>" +
"<img style=’float:right;margin:4px’ id=’imgDemo’ src=’http://app.baidu.com/map/images/tiananmen.jpg’ width=’139′ height=’104′ title=’天安门’/>" +
"<p style=’margin:0;line-height:1.5;font-size:13px;text-indent:2em’>天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门…</p>" +
"</div>";
var infoWindow = new BMap.InfoWindow(sContent);
var map = this._map;
var point = this.point;
m_map.openInfoWindow(infoWindow, point);
}
MyFocus.prototype.addEventListener = function (event, fun) {
if (event == 'click') {
this._clickFun = fun;
}
if (event == 'mouseover') {
this._mouseOverFun = fun;
}
}
MyFocus.prototype.getPosition = function () {
return this.point;
}
在html中script中添加
var marker = new MyFocus(new BMap.Point(x, y));
addClickListener(id, name, marker);
//mouseOver(marker);
// mouseOver(marker);
map.addOverlay(marker);