JavaScript API

qq.maps.GroundOverlay 类

继承自MVCObject类
叠加覆盖物，在地图上添加叠加层。

构造函数

构造函数
GroundOverlay(options:GroundOverlayOptions)

方法

方法	返回值	说明
getBounds()	LatLngBounds	返回GroundOverlay的所在矩形区域范围。
getImageUrl()	String	返回GroundOverlay的图片URL。
getMap()	Map	返回GroundOverlay所在的map对象。
getVisible()	Boolean	返回GroundOverlay是否可见。
getZIndex()	Number	返回GroundOverlay的zIndex。
setBounds(bounds:LatLngBounds)	none	设置GroundOverlay所在位置。
setImageUrl(imageUrl:String)	none	设置GroundOverlay的图片URL。
setMap(map:Map)	none	设置GroundOverlay所在的map对象。
setVisible(visible:Boolean)	none	设置GroundOverlay的可见性。
setZIndex(zIndex:Number)	none	设置GroundOverlay的zIndex。
setOptions(options:GroundOverlayOptions)	none	设置GroundOverlay属性。

事件

事件名	参数	说明
map_changed	none	GroundOverlay所属地图变化后会触发此事件。
visible_changed	none	GroundOverlay可见性变化后触发此事件。
click	event:MouseEvent	点击GroundOverlay后会触发此事件。
mousedown	event:MouseEvent	对GroundOverlay触发DOM mousedown事件时会触发此事件。
mousemove	event:MouseEvent	当鼠标在GroundOverlay内移动时触发此事件。
mouseout	event:MouseEvent	当鼠标离开GroundOverlay区域时会触发此事件。
mouseover	event:MouseEvent	当鼠标进入GroundOverlay区域时会触发此事件。
mouseup	event:MouseEvent	对GroundOverlay触发DOM mouseup事件时会触发此事件。
rightclick	event:MouseEvent	右键点击GroundOverlay后会触发此事件。

实例

本示例中，介绍设置与获取地图叠加层属性，添加点击事件

<!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;
        }
    </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()">
    <script>
        var init = function() {
            var center = new qq.maps.LatLng(39.916527, 116.397128);
            var map = new qq.maps.Map(document.getElementById('container'), {
                center: center,
                zoom: 13
            });
 
            var groundOverlay = new qq.maps.GroundOverlay;
            //设置显示图片的地图上的矩形区域
            groundOverlay.setBounds(new qq.maps.LatLngBounds(new qq.maps.LatLng(39.906, 116.389), new qq.maps.LatLng(39.920, 116.410)));
            //设置覆盖层可见，默认为true
            groundOverlay.setVisible(true);
            groundOverlay.setOptions({
                //设置显示地面覆盖层的地图
                map: map,
                //设置图片地址
                imageUrl: 'img/pm.jpg',
                //设置覆盖层的透明度
                opacity: 0.7,
                //设置地面覆盖层可响应鼠标事件，默认为true
                clickable: true,
            });
            //设置点击事件，点击叠加图片是弹出地图上显示图片的矩形范围
            qq.maps.event.addListener(groundOverlay, 'click', function() {
                alert("地图上显示图片的矩形范围为：" + groundOverlay.getBounds());
            });
        }
    </script>
    <div style="width:603px;height:300px" id="container"></div>
    <p>设置地图叠加层属性，添加点击事件</p>
</body>
 
</html>

在线试一试

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

已解决

未解决