弹窗| 地图 JS SDK | 开发支持 | 四维地图开放平台

弹窗

本小节介绍地图弹窗。

弹窗 Popup

1. 弹窗的创建

本小节介绍在地图图面添加一个弹窗的方式。同一个地图实例每次只能打开一个弹窗。

JavaScript

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 nimap.Popup().setText('我是第' + (i + 1) + '个Marker');
        var marker = new nimap.Marker().setLngLat(lnglats[i]).setPopup(popup).addTo(map);
    }
})

2. 自定义弹窗的创建

实例方法setDOMContent可设置自定义html的弹窗,实例化时可传className来自定义弹窗的样式

JavaScript

var infoWindow;

//在指定位置打开弹窗
function openInfo() {
    //构建弹窗中显示的内容
    var info = [];
    var title = '假日酒店<span style="font-size:11px;color:#F00;">价格:318</span>';
    info.push("<div style="padding:0px 0px 0px 4px;"><b>四维软件</b>");
    info.push("电话 : 010-8412000   邮编 : 100102");
    info.push("地址 :北京市海淀区四维图新大厦F6</div></div>");
    infoWindow = new nimap.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;
}