百度地图自定义覆盖物

来源：互联网发布：sql server怎么导入表编辑：程序博客网时间：2024/05/18 18:15
这里写图片描述
<!doctype html><html><head><meta charset="utf-8"><title>百度地图自定义覆盖物</title><style type="text/css" media="screen">body,html,#mapContainer{    width: 100%;    height: 100%;    overflow: hidden;    margin: 0;    font-family: "微软雅黑";}</style></head><body>    <div id="mapContainer"></div>    <!-- map -->    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>    <script>    // 百度地图API功能    var map = new BMap.Map("mapContainer"); // 创建Map实例    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放    var point = new BMap.Point(116.407845, 39.914101); //创建中心点    var myIcon = new BMap.Icon("iconDot.png", new BMap.Size(67,67)); //自定义点图标    var marker = new BMap.Marker(point, {        offset: new BMap.Size(0, 0), //偏移        icon: myIcon //图标    });    map.centerAndZoom(point, 12); // 初始化地图,设置中心点坐标和地图级别    map.addOverlay(marker); //把标记覆盖物添加到地图/*--自定义核心代码------------------------------------------------------------------------------------*/    //创建自定义覆盖物构造函数    function ComplexCustomOverlay(param) {        this.point = param.point; //覆盖物坐标点        this.content = param.content || ''; //覆盖内容        this.zIndex = param.zIndex || 1; //覆盖物内容层级        this.boxClass = param.boxClass || ''; //覆盖物容器class名称        this.boxStyle = cssText(param.boxStyle); //覆盖物容器样式        this.arrowClass = param.arrowClass || ''; //覆盖物箭头class名称        this.arrowStyle = cssText(param.arrowStyle); //覆盖物箭头样式    }    //把百度地图遮盖物对象赋值给构造函数原型对象    ComplexCustomOverlay.prototype = new BMap.Overlay();     //初始化创建覆盖物    ComplexCustomOverlay.prototype.initialize = function(map) {        this.map = map;        this.box = document.createElement('div');        this.box.className = this.boxClass;        this.box.style.cssText = this.boxStyle;        this.box.innerHTML = this.content;        this.arrow = document.createElement('div');        this.arrow.className = this.arrowClass;        this.arrow.style.cssText = this.arrowStyle;        map.getPanes().labelPane.appendChild(this.box);        map.getPanes().labelPane.appendChild(this.arrow);        return this.box;    };    //地图拖动调用事件    ComplexCustomOverlay.prototype.draw = function() {        mapDraw(this);    };    //计算覆盖物在地图上的位置    function mapDraw(_this){        var pixel = map.pointToOverlayPixel(_this.point);        _this.box.style.left = pixel.x - parseInt(getStyle(_this.box,'width'))/2 - (parseInt(getStyle(_this.box,'padding-left')) + parseInt(getStyle(_this.box,'padding-right')))/2 + "px";         _this.box.style.bottom  = -pixel.y + parseInt(getStyle(_this.arrow,'height')) + "px";        _this.arrow.style.left = pixel.x - parseInt(getStyle(_this.arrow,'width'))/2 + "px";         _this.arrow.style.bottom  = -pixel.y + "px";    }    //容器css样式配置    var boxCss = {        'position': 'absolute',        'width': '300px',        'height': '150px',        'padding': '24px',        'background-color': '#fff',        'border-radius': '5px',        'white-space': 'nowrap',        'box-shadow': 'rgb(0, 0, 0) 0px 1px 9px -3px'    };    //箭头css样式配置    var arrowCss = {        'position': 'absolute',        'width': '22px',        'height': '22px',        'overflow': 'hidden',        'background': 'url(arrow.png) no-repeat'    };    //实例化覆盖物对象    var myCompOverlay = new ComplexCustomOverlay({        point: point,        content: '<div>自定义覆盖物</div>',        boxClass: 'box',        boxStyle: boxCss,        arrowClass: 'arrow',        arrowStyle: arrowCss,        zIndex: 1    });    //地图缩放重新计算覆盖物位置    map.addEventListener("zoomend", function(){        mapDraw(myCompOverlay);    });    //把自定义覆盖物添加到地图    map.addOverlay(myCompOverlay); /*--自定义核心代码结束------------------------------------------------------------------------------------*//*--下面为辅助代码------------------------------------------------------------------------------------*/    //获取元素样式    function getStyle(node,attr){        if(typeof getComputedStyle != 'undefined'){            var value = getComputedStyle(node,null).getPropertyValue(attr);            return attr == 'opacity' ? value * 100 : value; //兼容不透明度，如果是不透明度，则返回整数方便计算        }else if(typeof node.currentStyle != 'undefined'){ //如果是IE            if(attr == 'opacity'){ //兼容不透明度                return Number(node.currentStyle.getAttribute('filter').match(/(?:opacity[=:])(\d+)/)[1]);            }else{                return node.currentStyle.getAttribute(attr);            }        }    }    //css样式字符串处理    function cssText(style){        var css = '';        if(typeof style == 'string'){            css = style;        }else if(typeof style == 'object'){            for(var i in style){                css += i + ':' + style[i] + ';';            }        }        return css;    }    </script></body></html>
阅读全文
0 0