百度地图自定义覆盖物

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

&蓝瘦&

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

阅读量154

点赞数

分类专栏：百度地图文章标签：百度地图

本文链接：https://blog.csdn.net/weixin_42303013/article/details/102587777

版权

百度地图专栏收录该内容

2 篇文章 0 订阅

订阅专栏

自定义覆盖物

<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap{width:100%;height:100%;}
        .customOverlay {
            background: #4FA5FC;
            width: 100px;
            height: 90px;
            position: absolute;
        }
        .infoBoxContent{font-size:12px; }
        .infoBoxContent .list{width:100px;height:80px;}
        .infoBoxContent .list ul{margin:0;list-style:none;}
        .infoBoxContent .list ul li {float:left;width:100px;}
        .infoBoxContent .list ul .last{border:none;}
        .infoBoxContent .list ul img{    width: 60px;
            height: 60px;
            border-radius:50%;
            margin-left: -40px;}
        .infoBoxContent .list ul p{padding:0;margin:0;
        }
        .infoBoxContent .left{float:left;}
        .infoBoxContent .left.mg{
            margin: 4px 4px 0 4px;
        }
        .title{
            height: 28px;
            margin-top: -20px;
        }
        .infor{
            height: 30px;
        }
    </style>
</script>
    <script type="text/javascript"  src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script>
    !function(mapInit) {
        var script = document.createElement("script");标题
        script.type = "text/javascript";
        script.src = "http://api.map.baidu.com/api?v=2.0&ak=你的ak&callback=mapinit";
        window['mapinit'] = function() {
            mapInit();
        };
        document.head.appendChild(script);
    }
</script>
<script type="text/javascript">
    var map = new BMap.Map("allmap", { mapType: BMAP_NORMAL_MAP });             // 创建Map实例
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 6);
    map.enableScrollWheelZoom();
    var CustomOverlay = function (point,mg,title,infor) {
        this._point = point;
        this._mg = mg;
        this._title = title;
        this._infor = infor;
    }
    CustomOverlay.prototype = new BMap.Overlay();

    CustomOverlay.prototype.initialize = function (map) {
        this._map = map;
        var div = this._div = document.createElement("div");
        div.className = "customOverlay";
        div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
        div.style.background = "#4FA5FC";
        div.style.height = "90px";
        div.style.width = "150px";
        div.style.lineHeight = "70px";
        div.style.textAlign = "center";
        div.style.background = "url(image/111.png) no-repeat";
        div.style.color = "#ffffff";
        div.style.fontSize = "42px";
        //展示f覆盖物的信息
        var content ="<div class='infoBoxContent'><div class='list'><ul><li class='last'>";
        content +="<div class='left mg'><img src='"+this._mg+"'/></div>"
        content +="<div class='left'><div class='title'>"+this._title+"</div><div class='infor'>"+this._infor+"</div></div>";
        content +=" </li></ul></div></div>";
        div.innerHTML = content;
        map.getPanes().markerPane.appendChild(div);
        return div;
    }
    //以经纬度为点,自定义位置
    CustomOverlay.prototype.draw = function () {
        var map = this._map;
        var pixel = map.pointToOverlayPixel(this._point);
        this._div.style.left = pixel.x-35 + "px";
        this._div.style.top = pixel.y-80 + "px";
    }
    var data = [
        {
            'lat':'116.414',
            'log':'36.25',
            'img':'image/tx.jpeg',
            'title:'程序媛',
            'infor':'bug制造者'
        },
        {
            'lat':'110.414',
            'log':'38.25',
            'img':'image/tx.jpeg',
            'title':'程序员',
            'infor':'bug解决者'
        }
    ];
//添加覆盖物
    for(var i=0;i<data.length;i++){
        var point2 = new BMap.Point(data[i].lat, data[i].log);
        map.addOverlay(new CustomOverlay(point2,data[i].img,data[i].title,data[i].infor));
    }
</script>

&蓝瘦&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图自定义覆盖物

自定义覆盖物<!DOCTYPE html><html><head lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0...
复制链接

扫一扫

专栏目录