遇到的问题
1、打开信息窗口后设置宽度无效
$(".content-window-card").width(500);
解决方法： 在setTimeout中设置宽度，原因是刚打开信息窗口Dom结构还没完全生成，获取不到元素
setTimeout(function(){ $(".content-window-card").width(500); //$(".content-window-card").width(500 130*(i-1)); },100)
2、信息窗口在可视界面中不居中（偏下）
解决方法：设置右面表格的最小宽度。
<table class="table table-bordered" style="min-width:250px;">
完整的代码如下：
代码语言：javascript复制 .content-window-card {
position: relative;
box-shadow: none;
bottom: 0;
left: 0;
width: auto;
padding: 0;
}
.content-window-card p {}
.custom-info {
border: solid 1px silver;
}
div.info-top {
position: relative;
background: none repeat scroll 0 0 #F9F9F9;
border-bottom: 1px solid #CCC;
border-radius: 5px 5px 0 0;
}
div.info-top div {
text-align:center;
color: #333333;
font-size: 14px;
font-weight: bold;
line-height: 35px;
padding: 0 10px;
}
div.info-top img {
position: absolute;
top: 10px;
right: 10px;
transition-duration: 0.25s;
}
div.info-top img:hover {
box-shadow: 0px 0px 5px #000;
}
div.info-middle {
padding: 15px;
overflow:hidden;
}
div.info-bottom {
height: 0px;
width: 100%;
clear: both;
text-align: center;
}
div.info-bottom img {
position: relative;
z-index: 104;
}
.amap-marker-label{
border: 1px solid #6e99f5;
}
.mapTipInfo .left{width:200px;float:left;}
.mapTipInfo .left .top{text-align:center;}
.mapTipInfo .left img{width:100%;margin-bottom:15px;}
.mapTipInfo .left li{line-height:25px;}
.mapTipInfo .right{margin-left:220px;}
</style> <script>
var map = new AMap.Map('allmap', {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 11, //初始化地图层级
center: [119.98186101, 31.77139674] //初始化地图中心点
});
var title = 'XXX Custom';
var content = "<h2>this is middle</h2>"
var lnglats = [
{position:[119.98186101, 31.77139674],flag:0,state:1},
{position:[119.98186101, 31.76139674],flag:0,state:2},
{position:[119.99186101, 31.76139674],flag:0,state:3},
{position:[119.97186101, 31.76139674],flag:1,state:4,label:"小王"},
{position:[119.96186101, 31.76139674],flag:1,state:4,label:"小李"}
];
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
autoMove:true,
//content: createInfoWindow(title, content),
offset: new AMap.Pixel(16, -45)
});
for (var i = 0, marker; i < lnglats.length; i ) {
var Icon;
var Label;
if(lnglats[i].flag==0){
if(lnglats[i].state==1){
Icon = "../../dist/img/MapAlarm.png";
}else if(lnglats[i].state==2){
Icon = "../../dist/img/MapOffline.png";
}else if(lnglats[i].state==3){
Icon = "../../dist/img/MapOnline.png";
}
}else if(lnglats[i].flag==1){
Icon = "../../dist/img/online-people.png";
Label=lnglats[i].label;
}
var marker = new AMap.Marker({
icon: Icon,
position: lnglats[i].position,
map: map
});
console.log(Label)
//if(typeof(Label)!=="undefined"){ 这种写法也行
if(Label!==undefined){
marker.setLabel({
offset: new AMap.Pixel(32, 10), //设置文本标注偏移量
content: "<div class='info' style='color:#e98b05;'>" Label "</div>", //设置文本标注内容
//direction: 'right' //设置文本标注方位
});
}
//marker.content = '我是第' (i 1) '个Marker';
if(lnglats[i].flag==0){
marker.on('click', markerClick);
}
//marker.on('click', markerClick);
//marker.emit('click', {target: marker});
}
function markerClick(e) {
//var i=3
infoWindow.setContent(createInfoWindow(title, content));
infoWindow.open(map, e.target.getPosition());
setTimeout(function(){
$(".content-window-card").width(500);
//$(".content-window-card").width(500 130*(i-1));
},100)
}
map.setFitView();
//构建自定义信息窗体
function createInfoWindow(title, content) {
var info = document.createElement("div");
info.className = "custom-info input-card content-window-card";
//可以通过下面的方式修改自定义窗体的宽高
//info.style.width = "400px";
// 定义顶部标题
var top = document.createElement("div");
var titleD = document.createElement("div");
var closeX = document.createElement("img");
top.className = "info-top";
titleD.innerHTML = title;
closeX.src = "https://img.yuanmabao.com/zijie/pic/2019/09/04/fof3t3ip5ps.gif";
closeX.onclick = closeInfoWindow;
top.appendChild(titleD);
top.appendChild(closeX);
info.appendChild(top);
// 定义中部内容
var middle = document.createElement("div");
middle.className = "info-middle";
middle.style.backgroundColor = 'white';
middle.innerHTML = `<div class="mapTipInfo">
<div class="tipContent">
<div class="left margin_r20" style="">
<div class="top">
<img src="../../dist/img/map-xianchangPic.png" alt="" style=""/>
<hr style="height:1px;background:#ddd;border:none"/>
<img src="../../dist/img/map-shiyitu.png" alt="" style="width:100%;"/>
<hr style="height:1px;background:#ddd;border:none"/>
</div>
<ul class="bottom list-unstyled">
<li>设备名称：<span>金坛盛利维尔新材料</span></li>
<li>设备编号：<span>31100891</span></li>
<li>设备名称：金坛盛利维尔新材料</li>
<li>SIM卡号：<span>13914306003</span></li>
<li><a href="">调压器配置信息</a></li>
<li><a href="">调压器设置参数信息</a></span></li>
</ul>
</div>
<div class="right">
<table class="table table-bordered" style="min-width:250px;">
<tbody>
<tr class="firsttr">
<td><strong>名称</strong></td>
<td><strong>主路</strong></td>
</tr>
<tr>
<td>差压 Kpa</td>
<td>0.05</td>
</tr>
<tr>
<td>进口压力 Kpa</td>
<td>180</td>
</tr>
<tr>
<td>出口压力 Kpa</td>
<td><a href="index1-Monitor-pressure.html">103</a></td>
</tr>
<tr>
<td>T ℃</td>
<td>38.04</td>
</tr>
<tr>
<td>切断阀状态</td>
<td>已切断</td>
</tr>
<tr>
<td>放散阀状态</td>
<td>打开</td>
</tr>
<tr>
<td>气体浓度</td>
<td>15%LEL</td>
</tr>
<tr>
<td>Qb Sm³/h</td>
<td>0.00</td>
</tr>
<tr>
<td>Vb Sm³</td>
<td><a href="">10793926.36</a></td>
</tr>
<tr>
<td colspan="2"><div>
<a class="btn btn-info btn-xs margin_b5" type="button" href="histroyData.html"><i class="fa fa-bar-chart"></i>历史数据</a>
<button class="btn btn-info btn-xs margin_b5" type="button"><i class="fa fa-bell-o"></i>报警数据</button> </br>
<button class="btn btn-info btn-xs margin_b5" type="button"><i class="fa fa-file-text-o"></i>维护记录</button>
<button class="btn btn-info btn-xs margin_b5" type="button"><i class="fa fa-file-text-o"></i>报警分配</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>`;
info.appendChild(middle);
// 定义底部内容
var bottom = document.createElement("div");
bottom.className = "info-bottom";
bottom.style.position = 'relative';
bottom.style.top = '0px';
bottom.style.margin = '0 auto';
var sharp = document.createElement("img");
sharp.src = "https://img.yuanmabao.com/zijie/pic/2019/09/04/x4thlpxjg1c.png";
bottom.appendChild(sharp);
info.appendChild(bottom);
return info;
}
//关闭信息窗体
function closeInfoWindow() {
map.clearInfoWindow();
}
</script>(adsbygoogle = window.adsbygoogle || []).push({});
