百度地图使用ztree,百度地图自定义检索面板
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();//实例化调用函数
效果图: