Class:覆盖物/InfoWindow - 腾讯地图API

qq.maps.InfoWindow 类

继承自MVCObject类

此类表示地图上的信息窗口。

构造函数

构造函数
`InfoWindow(options:InfoWindowOptions)`

方法

方法	返回值	说明
`open()`	`none`	打开信息窗口。
`close()`	`none`	关闭信息窗口。
`getContent()`	`string \| HTMLElement`	获取信息窗口中的内容。
`getMap()`	`Map`	获取信息窗口所在的map对象。
`getPosition()`	`LatLng \| Marker`	获取信息窗口的坐标位置。
`getZIndex()`	`Number`	获取信息窗口的zIndex值。
`setContent(content:String \| HTMLElement)`	`none`	设置信息窗口显示区的内容。
`setMap(map:Map)`	`none`	设置信息窗口所在的map对象。
`setPosition(position:LatLng \| Marker)`	`none`	设置信息窗口的位置，如需指向Marker的正上方，可使用Marker的实例作为position参数。
`setZIndex(zIndex:Number)`	`none`	设置信息窗口的zIndex值。
`setOptions(options:InfoWindowOptions)`	`none`	设置信息窗口的多个参数。

事件

事件名	参数	说明
`content_changed`	`none`	内容属性更改时会触发此事件。
`position_changed`	`none`	坐标位置更改时会触发此事件。
`zindex_changed`	`none`	zIndex 属性更改时会触发此事件。
`domready`	`none`	当包含 InfoWindow 的内容的附加到 DOM 时，会触发此事件。
`closeclick`	`none`	点击关闭按钮时会触发此事件。

实例

本示例中，介绍信息窗口的一些方法

JavaScript

var init = function() {
    var center = new qq.maps.LatLng(39.908860, 116.397427);
    var map = new qq.maps.Map(document.getElementById('container'), {
        center: center,
        zoom: 13
    });
    var infoWin = new qq.maps.InfoWindow({
        map: map
    });

    //open()打开信息窗口
    infoWin.open();
    infoWin.setPosition(map.getCenter());

    //close()关闭信息窗口
    setTimeout(function() {
        infoWin.close();
    }, 10 * 1000);

    //setContent()设置信息窗口显示区的内容
    infoWin.setContent('<div>hello word!!<img style="width:80px; height:80px;" src="img/em.jpg"/></div>');

    //getContent()获取信息窗口中的内容
    var contentDiv = document.getElementById('contentDiv');
    contentDiv.innerHTML = "信息窗口的信息是:" + infoWin.getContent();

    //getMap()获取信息窗口所在的map对象,setMap()设置信息窗口所在的map对象
    var mapM = document.getElementById("mapM");
    qq.maps.event.addDomListener(mapM, "click", function() {
        if (infoWin.getMap()) {
            infoWin.setMap(null);
        } else {
            infoWin.setMap(map);
        }
    });

    //setPosition()设置信息窗口的位置，如需指向Marker的正上方，可使用Marker的实例作为position参数。
    var flag = true;
    var setP = document.getElementById("setP");
    var latLng = new qq.maps.LatLng(39.908, 116.397497);
    qq.maps.event.addDomListener(setP, "click", function() {
        infoWin.setMap(map);
        if (flag) {
            flag = false;
            infoWin.setPosition(latLng);
        } else {
            flag = true;
            infoWin.setPosition(center);
        }
    });

    //getPosition()获取信息窗口的坐标位置
    var positionDiv = document.getElementById('positionDiv');
    positionDiv.innerHTML = "信息窗口的坐标位置:" + infoWin.getPosition();


    //setZIndex()设置信息窗口的zIndex值。getZIndex()获取信息窗口的zIndex值
    infoWin.setZIndex(1000);
    var zIndexDiv = document.getElementById('zIndexDiv');
    zIndexDiv.innerHTML = "信息窗口的zIndex是:" + infoWin.getZIndex();

    //设置信息窗口参数值
    infoWin.setOptions({
        map: map,
        zIndex: 100
    });


}

JavaScript+HTML

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>添加信息窗口</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        body,
        button,
        input,
        select,
        textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }
        #info {
            width: 603px;
            padding-top: 3px;
            overflow: hidden;
        }
        .btn {
            width: 142px;
        }
    </style>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>

</head>

<body onload="init();">
    <div style="width:603px;height:300px" id="container"></div>
    <div style="width:100%;" id="contentDiv"></div>
    <div style="width:100%;" id="positionDiv"></div>
    <div style="width:100%;" id="zIndexDiv"></div>
    <div id="info">
        <button id="mapM" class="btn">setMap</button>
        <button id="setP" class="btn">setPosition</button>
    </div>
    <script>
        var init = function() {
            var center = new qq.maps.LatLng(39.908860, 116.397427);
            var map = new qq.maps.Map(document.getElementById('container'), {
                center: center,
                zoom: 13
            });
            var infoWin = new qq.maps.InfoWindow({
                map: map
            });

            //open()打开信息窗口
            infoWin.open();
            infoWin.setPosition(map.getCenter());

            //close()关闭信息窗口
            setTimeout(function() {
                infoWin.close();
            }, 10 * 1000);

            //setContent()设置信息窗口显示区的内容
            infoWin.setContent('<div>hello word!!<img style="width:80px; height:80px;" src="img/em.jpg"/></div>');

            //getContent()获取信息窗口中的内容
            var contentDiv = document.getElementById('contentDiv');
            contentDiv.innerHTML = "信息窗口的信息是:" + infoWin.getContent();

            //getMap()获取信息窗口所在的map对象,setMap()设置信息窗口所在的map对象
            var mapM = document.getElementById("mapM");
            qq.maps.event.addDomListener(mapM, "click", function() {
                if (infoWin.getMap()) {
                    infoWin.setMap(null);
                } else {
                    infoWin.setMap(map);
                }
            });

            //setPosition()设置信息窗口的位置，如需指向Marker的正上方，可使用Marker的实例作为position参数。
            var flag = true;
            var setP = document.getElementById("setP");
            var latLng = new qq.maps.LatLng(39.908, 116.397497);
            qq.maps.event.addDomListener(setP, "click", function() {
                infoWin.setMap(map);
                if (flag) {
                    flag = false;
                    infoWin.setPosition(latLng);
                } else {
                    flag = true;
                    infoWin.setPosition(center);
                }
            });

            //getPosition()获取信息窗口的坐标位置
            var positionDiv = document.getElementById('positionDiv');
            positionDiv.innerHTML = "信息窗口的坐标位置:" + infoWin.getPosition();


            //setZIndex()设置信息窗口的zIndex值。getZIndex()获取信息窗口的zIndex值
            infoWin.setZIndex(1000);
            var zIndexDiv = document.getElementById('zIndexDiv');
            zIndexDiv.innerHTML = "信息窗口的zIndex是:" + infoWin.getZIndex();

            //设置信息窗口参数值
            infoWin.setOptions({
                map: map,
                zIndex: 100
            });


        }
    </script>
</body>

</html>

新窗口打开在线试一试