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>
这篇文章对您解决问题是否有帮助？
已解决
未解决