运行结果：
参数类型
点击某个设备之后需要如下信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#devAdmiInfo {
border-radius:10px;
width: 400px;
background-color: #C1C1C1;
z-index: 10;
position: absolute;
left: 30%;
bottom: 50px;
display: flex;
flex-direction: row;
justify-content: start;
flex-wrap: wrap;
align-content: flex-start;
}
#devAdmiInfo .devInfo {
border-radius:5px;
position: relative;
width: 18%;
height: 25px;
background-color: #F3F3F3;
margin: 7px 4px;
cursor: pointer;
}
#devAdmiInfo .devInfo.select {
background-color: palegoldenrod;
}
#devAdmiInfo .devInfo .devImg {
height: 20px;
width: 20px;
margin-left: 2px;
margin-top: 2px;
}
#devAdmiInfo .devInfo span {
color:#000;
font-size: 2px;
position: absolute;
top: 50%;
transform: translateY(-50%);
padding-left: 5px;
}
#devAdmiInfo .devInfo .status{
display: inline-block;
position: absolute;
right: 0;
top: 5px;
font-size: 14px;
color: lawngreen;
}
#devAdmiInfo .devInfo .status.abnormal{
color: red;
}
#perDivInfo {
border-radius:10px;
z-index: 100;
position: absolute;
background-color: #F3F3F3;
left: 30%;
top: 20px;
}
#perDivInfo p {
color:#000000;
padding: 0;
font-family: 楷体,serif;
margin: 10px 20px 10px 10px;
}
#perDivInfo span {
font-size:20px;
position: absolute;
right: 5px;
top: 0;
cursor: pointer;
color: #000000;
}
#map3d{
height: 300px;
width: 300px;
position: relative;
}
</style>
</head>
<body>
<div id="map3d">
</div>
</body>
<script src="jquery.js"></script>
<script>
params= {"rows":{
"abc1111100":{"status":1,"name":"监测站00","type":"种类0"},
"abc1111101":{"status":0,"name":"监测站01","type":"种类0"},
"abc1111102":{"status":1,"name":"监测站02","type":"种类0"},
"abc1111103":{"status":1,"name":"监测站03","type":"种类0"},
"abc1111104":{"status":1,"name":"监测站04","type":"种类0"},
"abc1111105":{"status":1,"name":"监测站05","type":"种类0"},
"abc1111106":{"status":1,"name":"监测站06","type":"种类1"},
"abc1111107":{"status":1,"name":"监测站07","type":"种类1"},
"abc1111108":{"status":1,"name":"监测站08","type":"种类1"},
"abc1111109":{"status":1,"name":"监测站09","type":"种类1"},
"abc1111110":{"status":1,"name":"监测站10","type":"种类1"},
"abc1111111":{"status":0,"name":"监测站11","type":"种类2"},
"abc1111112":{"status":1,"name":"监测站12","type":"种类2"},
"abc1111113":{"status":1,"name":"监测站13","type":"种类3"},
"abc1111114":{"status":1,"name":"监测站14","type":"种类3"},
"abc1111115":{"status":1,"name":"监测站15","type":"种类4"},
"abc1111116":{"status":1,"name":"监测站16","type":"种类5"},
"abc1111117":{"status":1,"name":"监测站17","type":"种类6"},
"abc1111118":{"status":1,"name":"监测站18","type":"种类7"},
"abc1111119":{"status":1,"name":"监测站19","type":"种类8"}
}};
itemInfo ={"lastTime":"20190812","lastInfo":"111111"};
let $devAdmiInfo = $('<div></div>');
let $map3d = $('#map3d');
$devAdmiInfo.attr('id', 'devAdmiInfo');
$devAdmiInfo.attr('class', 'devAdmiInfo');
$.each(params.rows,function (index,value) {
let $devInfo,$devSpan;
if (value.status === 0) {
$devInfo = $(`<div class="devInfo select" code="${index}"></div>`);
$devSpan = $(`<span>${value.name}</span><span id="status" class='status abnormal'>●</span>`);
} else {
$devInfo = $(`<div class="devInfo" code="${index}"></div>`);
$devSpan = $(`<span>${value.name}</span><span id="status" class='status'>●</span>`);
}
let $devImg = $(`<img class="devImg" alt="${value.name}">`);
$devImg.attr('src', 'img/user.jpg');
$devInfo.append($devImg);
$devInfo.append($devSpan);
$devInfo.click(function () {
if( $('#perDivInfo').length!==0){
$('#perDivInfo').remove();
}
// 获取设备编号
let $devCode = $(this)[0].getAttribute('code');
let $perDivInfo = $(`<div id="perDivInfo"><p>设备编号:$devCode</p><p>最新时间:${itemInfo.lastTime}</p><p>最新时间:${itemInfo.lastInfo}</p><span id="devPerInfoClose">×</span></div>`)
$devAdmiInfo.append($perDivInfo);
$('#devPerInfoClose').click(function () {
$('#perDivInfo').remove();
});
});
$devAdmiInfo.append($devInfo);
});
$map3d.append($devAdmiInfo);
</script>
</html>
