弹窗
本小节介绍地图弹窗。
弹窗 Popup
1. 弹窗的创建
本小节介绍在地图图面添加一个弹窗的方式。同一个地图实例每次只能打开一个弹窗。
var lnglats = [
[116.368904, 39.923423],
[116.382122, 39.921176],
[116.387271, 39.922501],
[116.398258, 39.914600]
];
map.on('load',function () {
for (var i = 0, marker; i < lnglats.length; i++) {
var popup = new xtal.Popup().setText('我是第' + (i + 1) + '个Marker');
var marker = new xtal.Marker().setLngLat(lnglats[i]).setPopup(popup).addTo(map);
}
})
2. 自定义弹窗的创建
实例方法setDOMContent可设置自定义html的弹窗,实例化时可传className来自定义弹窗的样式
var infoWindow;
//在指定位置打开弹窗
function openInfo() {
//构建弹窗中显示的内容
var info = [];
var title = '世纪皇冠酒店价格:318';
info.push("<div style="padding:0px 0px 0px 4px;">南昌软图科技有限公司");
info.push("电话 : 15179110655 邮编 : 330000");
info.push("地址 :南昌市高新区艾溪湖二路 366号悦峰商务广场1#办公楼 1404室</div></div>");
infoWindow = new xtal.Popup({closeOnClick: false,className:'custom'})
.setLngLat(map.getCenter())
.setDOMContent(createInfoWindow(title, info.join("<br/>")));
infoWindow.on('open', showInfoOpen);
infoWindow.on('close', showInfoClose);
infoWindow.addTo(map);
}
//构建自定义弹窗
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");
top.className = "info-top";
titleD.innerHTML = title;
top.appendChild(titleD);
info.appendChild(top);
// 定义中部内容
var middle = document.createElement("div");
middle.className = "info-middle";
middle.style.backgroundColor = 'white';
middle.innerHTML = content;
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';
info.appendChild(bottom);
return info;
}