GroundOverlayOptions 对象规范

叠加层参数。

属性

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

实例

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

<!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>

在线试一试

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

已解决
未解决