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

TMap.InfoWindow

用于创建信息窗覆盖物。

构造函数

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

方法

方法	返回值	说明
`setPosition(position:LatLng)`	`this`	设置经纬度位置。
`setContent(content:String)`	`this`	设置信息窗显示内容。
`setMap(map:Map)`	`this`	设置信息窗口所在的map对象，传入null则代表将infoWindow从Map中移除。
`getMap()`	`Map`	获取信息窗口所在的map对象。
`open()`	`this`	打开信息窗口。
`close()`	`this`	关闭信息窗口。
`destroy()`	`this`	销毁信息窗。
`on(eventName:String, listener:Function)`	`this`	添加listener到eventName事件的监听器数组中。
`off(eventName:String, listener:Function)`	`this`	从eventName事件的监听器数组中移除指定的listener。

事件

事件名	参数	说明
`closeclick`	`none`	点击信息窗的关闭按钮时会触发此事件。

实例

本示例中，介绍创建信息框

JavaScript

function initMap() {
    var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
    //初始化地图
    var map = new TMap.Map("container", {
        center: center
    });

    //初始化infoWindow
    var infoWindow = new TMap.InfoWindow({
        map: map, 
        position: center, //设置信息框位置
        content: "Hello World!" //设置信息框内容
    });
}

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">
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #container {
        width: 100%;
        height: 100%;
    }
    </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="initMap();">
    <div id="container"></div>
    <script>
    function initMap() {
        var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
        //初始化地图
        var map = new TMap.Map("container", {
            center: center
        });

        //初始化infoWindow
        var infoWindow = new TMap.InfoWindow({
            map: map, 
            position: center, //设置信息框位置
            content: "Hello World!" //设置信息框内容
        });
    }
    </script>
</body>

</html>

新窗口打开在线试一试