JavaScript API

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>

在线试一试

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

已解决

未解决