百度地图创建自定义覆盖物

最新推荐文章于 2023-08-24 13:42:44 发布

lihefei_coder

最新推荐文章于 2023-08-24 13:42:44 发布

阅读量2.3k

点赞数 1

分类专栏：百度地图 API 地图文章标签：百度地图自定义覆盖物 overlay

本文链接：https://blog.csdn.net/lihefei_coder/article/details/76596137

版权

地图同时被 3 个专栏收录

32 篇文章

订阅专栏

百度地图

19 篇文章

订阅专栏

API

5 篇文章

订阅专栏

这里写图片描述

<!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>