Class:覆盖物/GroundOverlay

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后会触发此事件。

实例

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

JavaScript

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());
    });
}

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;
        }
    </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>

新窗口打开在线试一试