高德地圖寬度不固定的信息窗口位置偏下的解決方法
遇到的問題
一、打開信息窗口後設置寬度無效javascript
$(".content-window-card").width(500);css
解決方法： 在setTimeout中設置寬度，緣由是剛打開信息窗口Dom結構還沒徹底生成，獲取不到元素html
setTimeout(function(){
$(".content-window-card").width(500);
//$(".content-window-card").width(500+130*(i-1));
},100)java
二、信息窗口在可視界面中不居中（偏下） web
解決方法：設置右面表格的最小寬度。bootstrap
<table class="table table-bordered" style="min-width:250px;">api
完整的代碼以下： app
.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>
<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://webapi.amap.com/images/sharp.png";
bottom.appendChild(sharp);
info.appendChild(bottom);
return info;
}
//關閉信息窗體
function closeInfoWindow() {
map.clearInfoWindow();
}
</script>
若是信息窗口中含有BootStrap Table表格，把表格改爲下面的this
<table class="table-striped noshadow" data-toggle="table" data-height="400" id="tiaoyaqiTable" > ...
打開信息窗口後發現沒有樣式，一樣須要setTimeoutspa
function markerClick(e) {
infoWindow.setContent(createInfoWindow(title, content));
infoWindow.open(map, e.target.getPosition());
setTimeout(function(){
//$(".content-window-card").width(500);
$('#tiaoyaqiTable').bootstrapTable({});
//$(".fixed-table-container").css("padding-bottom", "40px"); 能夠不加
//$(".content-window-card").width(500+130*(i-1));
},50)
}
相關文章
- 1. div（固定寬度和不固定寬度）居中顯示的方法總結
- 2. Android 高德地圖不能定位
- 3. 高德地圖定位
- 4. 高德地圖定位！
- 5. 【高德地圖】IP定位
- 6. 高德地圖定位5.0以下
- 7. 民用地圖經緯度糾偏-高德系地圖糾偏
- 8. 百度地圖的使用－定位－獲取位置信息
- 9. 微信小程序整合高德地圖獲取定位經緯度信息
- 10. Android高德地圖的定位
- 更多相關文章...
- • PHP 獲取圖像寬度與高度 - PHP參考手冊
- • Redis悲觀鎖解決高併發搶紅包的問題 - 紅包項目實戰
- • SpringBoot中properties文件不能自動提示解決方法
- • 算法總結-滑動窗口
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. div（固定寬度和不固定寬度）居中顯示的方法總結
- 2. Android 高德地圖不能定位
- 3. 高德地圖定位
- 4. 高德地圖定位！
- 5. 【高德地圖】IP定位
- 6. 高德地圖定位5.0以下
- 7. 民用地圖經緯度糾偏-高德系地圖糾偏
- 8. 百度地圖的使用－定位－獲取位置信息
- 9. 微信小程序整合高德地圖獲取定位經緯度信息
- 10. Android高德地圖的定位