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 点击关闭按钮时会触发此事件。

实例

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

<!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>

在线试一试

这篇文章对您解决问题是否有帮助?

已解决
未解决