百度地图使用ztree,百度地图自定义检索面板

其他 2019-04-12 14:21:02 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/caiyongshengCSDN/article/details/86736011

apiKey自己去官网注册;百度地图创建多个标注点maker,鼠标移到maker时弹出对应浮窗;

用ztree自定义右侧面板,点击节点时找到相应maker并弹出对应浮窗.

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="ztree/css/zTreeStyle.css">
    <link rel="stylesheet" href="css/basic.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>

<div class="container">
    <div class="lists-box">
        <div class="lists-cont">

            <!--地图容器-->
            <div class="mapBox">
                <div id="allmap" class="left-box"></div>
                <div id="ztreeList" class="right-box">
                    <ul id="ztree" class="ztree overflow-auto"></ul>
                </div>
            </div>

        </div>

    </div>
</div>


<script src="js/jquery-1.8.3.min.js"></script>
<script src="ztree/js/jquery.ztree.core-3.5.36.js"></script> <!--ztree-->
<script src="ztree/js/jquery.ztree.exhide-3.5.36.js"></script> <!--ztree-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DLdmAwyOOYgh1Y7M6U8yoYyT8Q3Kyr1G"></script> <!--百度地图-->
<script src="js/index.js"></script>
</body>
</html>

2.index.css

.fl{
    float:left;
}
.fr{
    float: right;
}

.table-box{
    width: 100%;
    display: table;
}
.table-cell {
    width: 100%;
    display: table-cell;
}

.nopadding{
    padding: 0;
}
.nopd-tb{
    padding-top: 0;
    padding-bottom: 0;
}

.inaline{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.in2line,.in3line{overflow:hidden;text-overflow:ellipsis;display:box;display:-webkit-box;-webkit-box-orient:vertical;}
.in2line{
    line-clamp: 2;
    -webkit-line-clamp: 2;
}

body{
    min-width: 1110px;
    margin: 0 auto;
}

.container{
    padding: 15px;
    overflow: hidden;
}
.container-list{
    float: left;
    width: 50%;
}

.head{
    padding: 5px 0;
}
.head h2{
    font-size: 16px;
    border-left: 5px solid #21B398;
    padding-left: 5px;
}
.head span,
.company-flex-between span{
    font-size: 12px;
    color: #909090;
    cursor: pointer;
}

.lists-box{
    padding: 10px;
}
.lists-cont{
    background: #fff;
    box-shadow: 0 3px 10px #ccc;
    border-radius: 5px;
}
.lists-cont ul{
    padding: 0 10px;
    overflow: hidden;
}
.lists-cont li{
    margin-bottom: -1px;
    padding: 10px 0;
    border-bottom: 1px solid #dfdfdf;
}

.js-wait-lists{display: flex;justify-content: space-around;align-items: center}
.js-wait-lists li{text-align: center;border: none;position: relative;cursor: pointer;line-height: 20px}
.js-wait-lists li p{padding-top: 5px}
.js-wait-lists li .mark{
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: red;
    right: 2px;
    top: 5px;
    color: #fff;
    overflow: hidden;
}

.company{
    margin-top: -15px;
}
.company .lists-cont{
    padding: 10px;
}
.company h3{
    font-size: 14px;
    padding: 0 0 10px;
    border-bottom: 1px solid #dfdfdf;
}

.company-box{
    overflow: hidden;
    border-bottom: 1px solid #dfdfdf;
}
.company-spac{
    padding: 12px;
    position: relative;
    /*overflow: hidden;*/
}
.company-item{
    float: left;
    /*width: 33.33%;*/
}
.company-head{
    width: 110px;
    text-align: center;
    float: left;
    /*position: absolute;*/
    /*left: 10px;*/
    /*top: 10px;*/
}
.company-head p{
    font-size: 10px;
}
.company-head img{
    display: block;
    width: 100%;
    height: 50px;
    margin-bottom: 5px
}

.company-cont{
    margin-left: 120px;
    font-size: 12px;
}
.company-cont dl{
    margin-bottom: 3px;
}
.company-cont dt{
    width: 86px;
    display: inline-block;
}
.company-cont dd{
    display: inline-block;
    width: 120px;
    height: 8px;
    border-radius: 8px;
    border: 1px solid #dfdfdf;
    position: relative;
}
.company-cont dd i{
    float: left;
    height: 8px;
}
.company-cont dd i.finish{
    border-radius: 10px 0 0 10px;
    background: #20B497;
}
.company-cont dd i.unapply{

    background: #F53623;
}
.company-cont dd i.undone{
    border-radius: 0 10px 10px 0;
    background: #F5A623;
}
.company-sign{
    margin-top: 8px;
}
.company-sign span{
    margin-right: 10px;
}
.company-sign i{
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 3px;
    border-radius: 50%;
    background: #F5A623;
}
.company-sign i.g{
    background: #20B497;
}
.company-sign i.r{
    background: #F53623;
}


.swiper-img{
    display: block;
    margin: 0 auto;
    width: 100%;
    border: 0;
}
.errorimg{
    display: block;
    margin: 0 auto;
    margin-top: 100px;
}

.swiper-text{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 10px;
    background: rgba(0,0,0,0.5);
    height: 40px;
    line-height: 40px;
    color: #fff;
    text-indent: 10px;
    font-size: 12px;
}

/*公司信息*/
.company-flex{display: flex;}
.company-flex-column{flex-direction: column}
.company-flex-between{justify-content: space-between}
.company-flex-1{flex:1}
.company-container{padding: 0 15px}
.company-lists-box{padding: 0 10px}
.company-information-pd{padding: 10px 0 10px 150px}
.js-company-information span{font-size: 16px}
.js-company-information span:first-of-type{display: inline-block;width: 100px;text-align: right;}
.js-company-information h1{line-height: 90px;text-align: center}
.company-breadcrumb{padding: 10px}
#js-company-list{background: #fff;display: none;}
.company-standard-Right{position: relative;padding: 0 10px;}
.company-standard-Right::after {
    content: '';
    width: 1px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #e7eaec;
}

/*表格*/
[v-cloak] {display: none}
.outerTable ,
.middleTable,
.insideTable{
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0 auto;
    text-align: center;
}
.outerTableTH,
.outerTableTH>td,
.middleTableTH>td,
.insideTableTH>td,
.outerTableTH>th {
    height: 30px;
    border: 1px solid #ccc;
    background: #fff;
    font-size: 12px;
    border-bottom: none;
}
.outerTableTH:last-child{border-bottom: 1px solid #ccc;}
.middleTable,.insideTable{width: 100%;border-bottom: 1px solid #ccc}
.insideTable:last-child{border-bottom:none}
.middleTable:last-child{border-bottom:none}
.outerTableHeader th{background: #E6F7FF;}

/*#allmap {width: 100%;height: 500px}*/
.mapBox{width: 100%;height: 500px}
.mapBox .left-box,.mapBox .right-box{float: left;width: 60%;height: 100%;}
.mapBox .right-box{width: 40%;overflow: auto}

3.index.js

function imgError (e) {
    e.onerror = null;
    $(e).parent().html('<img src="../images/file_img.png" class="errorimg" >');
}
function logoError (e) {
    e.onerror = null;
    $(e).attr('src', '../images/logo_img.png')
}

//公司信息,地图显示
var winData = [];
var Map = {//定义对象
    init: function(){
        var map = new BMap.Map('allmap');//创建实例
        var point = new BMap.Point(113.30764968,23.1200491);//设立一个中心点坐标
        map.centerAndZoom(point,13);//初始化并且设立级别，百度只提供17个级别3-18，此处50km
        map.enableScrollWheelZoom(true);//激活滚轮操作

        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk);
                // map.panTo(r.point,true);  //移动到当前位置中心点
                // map.setZoom(15);   //地图放大
                // alert('您的位置：'+r.point.lng+','+r.point.lat);
            }
            else {
                alert('failed'+this.getStatus());
            }
        });


        //添加控件
        var ctrlNav = new window.BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(ctrlNav);//缩放

        var ctrlOva = new window.BMap.OverviewMapControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            isOpen: 1
        });
        map.addControl(ctrlOva);//缩略图

        var ctrlSca = new window.BMap.ScaleControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT
        });
        map.addControl(ctrlSca);//比例尺

        // 添加定位控件
        var geolocationControl = new BMap.GeolocationControl();
        geolocationControl.addEventListener("locationSuccess", function(e){
            // 定位成功事件
            var address = '';
            address += e.addressComponent.province;
            address += e.addressComponent.city;
            address += e.addressComponent.district;
            address += e.addressComponent.street;
            address += e.addressComponent.streetNumber;
            alert("当前定位地址为：" + address);
        });
        geolocationControl.addEventListener("locationError",function(e){
            // 定位失败事件
            alert(e.message);
        });
        map.addControl(geolocationControl);

        Map.InfoAjax(map)
    },
    InfoAjax:function(map){
        $.ajax({
            type: "get",
            dataType: "json",
            url: "http://yapi.demo.qunar.com/mock/11732/companyInfo",
            contentType: '',
            data: {},
            success: function (result) {
                var data = result.data;
                var str = '';
                for (var i=0;i<data.length;i++) {
                    var parentData = data[i];
                    for (var j = 0, len = parentData.children.length; j < len; j++) {
                        var objDep = parentData.children[j];

                        var finish1 = 0,finish2 = 0, finish3 = 0,//进度条 符合
                            undone1 = 0,undone2 = 0, undone3 = 0,//进度条 不符合
                            unapply1 = 0,unapply2 = 0,unapply3 = 0,//进度条 不适用
                            fhTotal = 0,bsyTotal = 0,bfhTotal = 0; //总数

                        var ycxz = objDep.data[0].ycxz;
                        var sdxz = objDep.data[1].sdxz;
                        var fdzc = objDep.data[2].fdzc;

                        if(!ycxz.符合){ycxz.符合 = 0}
                        if(!ycxz.不符合){ycxz.不符合 = 0}
                        if(!ycxz.不适用){ycxz.不适用 = 0}
                        if(!sdxz.符合){sdxz.符合 = 0}
                        if(!sdxz.不符合){sdxz.不符合 = 0}
                        if(!sdxz.不适用){sdxz.不适用 = 0}
                        if(!fdzc.符合){fdzc.符合 = 0}
                        if(!fdzc.不符合){fdzc.不符合 = 0}
                        if(!fdzc.不适用){fdzc.不适用 = 0}

                        //总数
                        fhTotal = ycxz.符合 + sdxz.符合 + fdzc.符合 ;
                        bsyTotal = ycxz.不适用 + sdxz.不适用 + fdzc.不适用 ;
                        bfhTotal = ycxz.不符合 + sdxz.不符合 + fdzc.不符合 ;
                        //法定自查进度条
                        finish1 = Number(fdzc.符合 / (fdzc.不符合 + fdzc.符合 + fdzc.不适用) * 100).toFixed(2) + '%';
                        unapply1 = Number(fdzc.不符合 / (fdzc.不符合 + fdzc.符合 + fdzc.不适用) * 100).toFixed(2) + '%';
                        undone1 = Number(fdzc.不适用 / (fdzc.不符合 + fdzc.符合 + fdzc.不适用) * 100).toFixed(2) + '%';
                        //远程行政进度条
                        finish2 = Number(ycxz.符合 / (ycxz.不符合 + ycxz.符合 + ycxz.不适用) * 100).toFixed(2) + '%';
                        unapply2 = Number(ycxz.不符合 / (ycxz.不符合 + ycxz.符合 + ycxz.不适用) * 100).toFixed(2) + '%';
                        undone2 = Number(ycxz.不适用 / (ycxz.不符合 + ycxz.符合 + ycxz.不适用) * 100).toFixed(2) + '%';
                        //实地行政进度条
                        finish3 = Number(sdxz.符合 / (sdxz.不符合 + sdxz.符合 + sdxz.不适用) * 100).toFixed(2) + '%';
                        unapply3 = Number(sdxz.不符合 / (sdxz.不符合 + sdxz.符合 + sdxz.不适用) * 100).toFixed(2) + '%';
                        undone3 = Number(sdxz.不适用 / (sdxz.不符合 + sdxz.符合 + sdxz.不适用) * 100).toFixed(2) + '%';

                        str =
                            '<h3>' + parentData.departName +
                            '<a class="mgl10 point color-blue font10" data-id="'+ objDep.departId +
                            '" data-orgCode="'+ objDep.orgCode +'" data-title="'+ objDep.departName +'" onclick="company(this)">' + '详情»' + '</a>' +
                            '</h3>' +
                            '<div class="company-box">'+
                            '<div class="company-item" data-id="'+ objDep.departId +'" data-orgCode="'+ objDep.orgCode +'" data-title="'+ objDep.departName +'">' +
                            '<div class="company-spac">' +
                            '<div class="company-head">' +
                            '<img src="file/server/' + objDep.orgLogo + '" onerror="logoError(this)" >' +
                            '<p class="inaline">' + objDep.departName + '</p>' +
                            '</div>' +
                            '<div class="company-cont">' +
                            '<dl>' +
                            '<dt>法定自查</dt>'+
                            '<dd>'+
                            '<i class="finish" style="width: ' + finish1 + '"></i>'+
                            '<i class="unapply" style="width: ' + unapply1 + '"></i>'+
                            '<i class="undone" style="width: ' + undone1 + '"></i>'+
                            '</dd>' +
                            '<span> '+ fdzc.已完成 +'/'+ fdzc.总单数 +'</span>' +
                            '</dl>' +
                            '<dl>' +
                            '<dt>远程行政监管</dt>'+
                            '<dd>'+
                            '<i class="finish" style="width: ' + finish2 + '"></i>'+
                            '<i class="unapply" style="width: ' + unapply2 + '"></i>'+
                            '<i class="undone" style="width: ' + undone2 + '"></i>'+
                            '</dd>' +
                            '<span> '+ ycxz.已完成 +'/'+ ycxz.总单数 +'</span>' +
                            '</dl>' +
                            '<dl>' +
                            '<dt>实地行政监管</dt>'+
                            '<dd>'+
                            '<i class="finish" style="width: ' + finish3 + '"></i>'+
                            '<i class="unapply" style="width: ' + unapply3 + '"></i>'+
                            '<i class="undone" style="width: ' + undone3 + '"></i>'+
                            '</dd>' +
                            '<span> '+ sdxz.已完成 +'/'+ sdxz.总单数 +'</span>' +
                            '</dl>' +
                            '<div class="company-sign">' +
                            '<span><i class="g"></i>符合 '+ fhTotal +'</span>' +
                            '<span><i class="r"></i>不符合 '+ bfhTotal +'</span>' +
                            '<span><i></i>不适用 '+ bsyTotal +'</span>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>';

                        //弹窗
                        Map.markerFun(map,objDep,str,data);
                    }
                }
                Map.initTree(map,data);
                //处理进度条圆角
                $(".company-cont dl dd ").each(function(){
                    if($(this).children('.undone').width() == 0){
                        $(this).children('.unapply').css({"border-radius":"0 10px 10px 0"});
                        if($(this).children('.unapply').width() == 0){
                            $(this).children('.finish').css({"border-radius":"10px"});
                        }
                    }
                });
            }
        });
    },
    //创建多个标注
    markerFun:function (map,data,dom) {
        var points = new window.BMap.Point(data.x,data.y); //添加坐标
        // 创建文本标注
        var label = new window.BMap.Label(data.departName,{offset: new window.BMap.Size(20,-10)});
        var infoWindows  = new window.BMap.InfoWindow(dom);//悬浮提示信息
        var markers = new BMap.Marker(points);  //创建标注
        map.addOverlay(markers);  //添加标注
        markers.setLabel(label);
        markers.setAnimation(BMAP_ANIMATION_BOUNCE);  //跳动的动画
        markers.addEventListener("mouseover",function (event) {
            map.openInfoWindow(infoWindows,points);//参数：窗口、点  根据点击的点出现对应的窗口
            map.setZoom(15);   //地图放大
        });
        winData.push({  //将定义好的标注和信息弹窗放到数组
            "points":points,
            "label":label,
            "infoWindows":infoWindows,
            "markers":markers,
            "departId":data.departId
        })
    },
    //获取树
    initTree:function(map,data){
        var setting = {
            view: {
                dblClickExpand: true,
                showLine: true,
                selectedMulti: false,
                nameIsHTML: true,
                showIcon: false,
                // fontCss: setFontCss_ztree
            },
            data: {
                key: {
                    children: "children",
                    name:"departName"
                }
            },
            callback: {
                onClick: oncliskTree
            }
        };
        //树状点击方法
        function oncliskTree(event, treeId, treeNode) {
            var treeObj = $.fn.zTree.getZTreeObj(treeId);
            treeObj.expandNode(treeNode); //点击整行展开
            var sNodes = treeObj.getSelectedNodes(); //获取选中的节点
            if (sNodes.length > 0) {
                var level = sNodes[0].level;
                if (level === 1) {//父节点为0 子节点为1
                    for(var i=0;i<winData.length;i++){
                        if(winData[i].departId == sNodes[0].departId){
                            //参数：窗口、点  根据点击的点出现对应的窗口
                            map.openInfoWindow(winData[i].infoWindows,winData[i].points);
                            map.setZoom(15);   //地图放大
                        }
                    }
                }
            }
        }
        //赋值给树
        $.fn.zTree.init($('#ztree'), setting, data);
    },


    load_map: function(){//异步回调
        var load = document.createElement("script");
        load.src = "http://api.map.baidu.com/api?v=2.0&callback=Map.init";
        document.body.appendChild(load);
    }

};
Map.load_map();//实例化调用函数

效果图:

猜你喜欢

转载自blog.csdn.net/caiyongshengCSDN/article/details/86736011
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022