百度地图自定义覆盖物
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script> var map = new BMap.Map('allmap'); var Bcenter = new BMap.Point(116.404,39.915); map.centerAndZoom(Bcenter,11); //自定义的覆盖物 function myOverlay(point,text,mouseoverText){ this._point = point; this._text = text; this._overtext = mouseoverText; } //继承overlay的API myOverlay.prototype = new BMap.Overlay(); //初始化自定义覆盖物 myOverlay.prototype.initialize = function(map){ this._map = map; //创建div标签 var div = 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'; //创建span标签 var span = this._span = document.createElement('span'); div.appendChild(span); span.appendChild(document.createTextNode(this._text)); var that = this; //箭头的穿件 var arrow = 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); //标签绑定事件 /*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"; } */ //添加到覆盖物的容器中 map.getPanes().labelPane.appendChild(div); return div; } //绘制覆盖物 myOverlay.prototype.draw = function(){ var map = this._map; var pixel = map.pointToOverlayPixel(this._point); this._div.style.left = pixel.x - parseInt(this._arrow.left) + 'px'; this._div.style.top = pixel.y - 30 + 'px'; } //覆盖物显示 myOverlay.prototype.show = function(){ if(this._div){ this._div.style.display = ''; } } //隐藏覆盖物 myOverlay.prototype.hide = function(){ if(this._div){ this._div.style.display = 'none'; } } //自定义覆盖物添加事件 myOverlay.prototype.addEventListener = function (event, fun) { this._div['on' + event] = fun; } var myoverlay = new myOverlay(Bcenter,'鼠标上来看看','鼠标下去看看'); map.addOverlay(myoverlay); myoverlay.addEventListener('click',function(){ alert('注册点击事件'); }) </script>