JavaScript API
    开发指南
    参考手册
  • 示例
  • 更新日志
    • 常见问题
    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>

    在线试一试