Object:覆盖物/GroundOverlayOptions

GroundOverlayOptions 对象规范

叠加层参数。

属性

名称	类型	说明
`bounds`	`LatLngBounds`	地图上矩形区域。
`clickable`	`Boolean`	如果为true，地面覆盖层可响应鼠标事件，默认true。
`cursor`	`String`	鼠标hover时形状。
`imageUrl`	`String`	图片地址。
`map`	`Map`	显示地面覆盖层的地图。
`opacity`	`Number`	覆盖层的透明度。
`visible`	`Boolean`	为true时覆盖层可见，默认true。
`zIndex`	`Number`	覆盖层在z轴上高度，值越大的显示越靠前。

实例

本示例中，介绍设置地面叠加层属性

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({
        //设置显示地面覆盖层的地图
        map: map,
        //设置图片地址
        imageUrl: 'img/pm.jpg',
        //设置显示图片的地图上的矩形区域
        bounds: new qq.maps.LatLngBounds(new qq.maps.LatLng(39.906, 116.389), new qq.maps.LatLng(39.920, 116.410)),
        //设置覆盖层的透明度
        opacity: 0.7,
        //设置地面覆盖层可响应鼠标事件，默认为true
        clickable: true,
        //设置覆盖层可见，默认为true
        visible: true
    });

}

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({
                //设置显示地面覆盖层的地图
                map: map,
                //设置图片地址
                imageUrl: 'img/pm.jpg',
                //设置显示图片的地图上的矩形区域
                bounds: new qq.maps.LatLngBounds(new qq.maps.LatLng(39.906, 116.389), new qq.maps.LatLng(39.920, 116.410)),
                //设置覆盖层的透明度
                opacity: 0.7,
                //设置地面覆盖层可响应鼠标事件，默认为true
                clickable: true,
                //设置覆盖层可见，默认为true
                visible: true
            });

        }
    </script>
    <div style="width:603px;height:300px" id="container"></div>
    <p>设置地面叠加层属性</p>
</body>

</html>

新窗口打开在线试一试