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>