Baidu Map Custom Overlays

<script>varMap =NewBmap.map (' Allmap '); varBcenter =NewBmap.point (116.404,39.915); Map.centerandzoom (Bcenter,11); //Custom Overlays    functionMyoverlay (point,text,mouseovertext) { This. _point =Point ;  This. _text =text;  This. _overtext =Mouseovertext; }        //Inherit the overlay APIMyoverlay.prototype =NewBmap.overlay (); //initializing a custom overlayMyOverlay.prototype.initialize =function(map) { This. _map =map; //Create div Tags        vardiv = This. _div = document.createelement (' div '); Div.style.position= ' absolute '; Div.style.zIndex= BMap.Overlay.getZIndex ( This. _point.lat); Div.style.backgroundColor= ' #EE5D5B '; Div.style.border= ' 1px solid #BC3B3A '; Div.style.color= ' White '; Div.style.height= ' 18px '; Div.style.padding= ' 2px '; Div.style.lineHeight= ' 18px '; Div.style.whiteSpace= ' nowrap '; Div.style.MozUserSelect= ' None '; Div.style.fontSize= ' 12px '; //Create a span label        varspan = This. _span = document.createelement (' span ');        Div.appendchild (span); Span.appendchild (document.createTextNode ( This. _text)); varthat = This; //the piercing of the arrows        varArrow = This. _arrow = document.createelement (' div '); Arrow.style.background= "url (http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat"; Arrow.style.position= "Absolute"; Arrow.style.width= "11px"; Arrow.style.height= "10px"; Arrow.style.top= "22px"; Arrow.style.left= "10px"; Arrow.style.overflow= "hidden";        Div.appendchild (arrow); //Tag Binding Event    /*div.onmouseover = function () {This.style.backgroundColor = "#6BADCA";            This.style.borderColor = "#0000ff";            This.getelementsbytagname ("span") [0].innerhtml = That._overtext;        Arrow.style.backgroundPosition = "0px-20px";            } div.onmouseout = function () {This.style.backgroundColor = "#EE5D5B";            This.style.borderColor = "#BC3B3A";            This.getelementsbytagname ("span") [0].innerhtml = That._text;        arrow.style.backgroundPosition = "0px 0px"; }        */        //in a container that is added to the overlaymap.getpanes (). Labelpane.appendchild (Div); returnDiv; }        //Drawing CoveringsMyOverlay.prototype.draw =function(){        varMap = This. _map; varPixel = Map.pointtooverlaypixel ( This. _point);  This. _div.style.left = Pixel.x-parseint ( This. _arrow.left) + ' px ';  This. _div.style.top = pixel.y-30 + ' px '; }        //Overlay DisplayMyOverlay.prototype.show =function(){        if( This. _div) {             This. _div.style.display = "; }    }        //Hide CoverMyOverlay.prototype.hide =function(){        if( This. _div) {             This. _div.style.display = ' None '; }    }        //Custom Overlay Add EventMyOverlay.prototype.addEventListener =function(event, fun) { This. _div[' on ' + event] =Fun ; }        varMyoverlay =NewMyoverlay (Bcenter, ' mouse up to see ', ' Mouse down to see ');    Map.addoverlay (Myoverlay); Myoverlay.addeventlistener (' Click ',function() {alert (' Register Click event '); })    </script>

View Code

Baidu Map Custom Overlays