首页 > 网站 > WEB开发 > 正文

百度地图自定义覆盖物

2024-04-27 14:12:27
字体:
来源:转载
供稿:网友

百度地图自定义覆盖物

    <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>
View Code


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表