高德地图宽度不固定的信息窗口位置偏下的解决方法

最新推荐文章于 2024-01-21 18:00:53 发布

chouqie4152

最新推荐文章于 2024-01-21 18:00:53 发布

阅读量1.3k

点赞数 1

文章标签：嵌入式

原文链接：https://my.oschina.net/u/2612473/blog/3101251

版权

遇到的问题

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;">

完整的代码如下：

	.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://webapi.amap.com/images/close2.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>&nbsp;
                         <button class="btn btn-info btn-xs margin_b5" type="button"><i class="fa fa-bell-o"></i>报警数据</button>&nbsp;</br>
                         <button class="btn btn-info btn-xs margin_b5" type="button"><i class="fa fa-file-text-o"></i>维护记录</button>&nbsp;
                         <button class="btn btn-info btn-xs margin_b5" type="button"><i class="fa fa-file-text-o"></i>报警分配</button>&nbsp;
                     </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://webapi.amap.com/images/sharp.png";
        bottom.appendChild(sharp);
        info.appendChild(bottom);
        return info;
    }

    
    //关闭信息窗体
    function closeInfoWindow() {
        map.clearInfoWindow();
    }

    </script>

转载于:https://my.oschina.net/u/2612473/blog/3101251