Class:街景/PanoramaLabel - 腾讯地图API

qq.maps.PanoramaLabel 类

街景的文字标签。

构造函数

构造函数
`PanoramaLabel(opts?:PanoramaLabelOptions)`

方法

方法	返回值	说明
`getPanorama()`	`Panorama`	获得Label显示的街景对象。
`getPosition()`	`LatLng`	获取Label所在的位置坐标。
`getContent()`	`String`	返回Label的内容信息。
`getVisible()`	`Boolean`	返回Label的可见性。
`getAltitude()`	`Number`	获得Label距离地面的高度。
`setPanorama(panorama:Panorama)`	`none`	设置label要显示的街景对象。
`setPosition(position:LatLng)`	`none`	设置Label所在的位置。
`setContent(content:String)`	`none`	设置Label的内容信息。
`setVisible(visible:Boolean)`	`none`	设置Label的可见性。
`setAltitude(altitude:Number)`	`none`	设置Label距离地面的高度。

事件

事件名	参数	说明
`click`	`none`	点击Label后触发此事件。
`mouseover`	`none`	当鼠标进入Label时触发此事件。
`mouseout`	`none`	当鼠标移出Label时触发此事件。

实例

本示例中，介绍如何设置街景文字标签属性

JavaScript

function init() {
    //创建街景
    var pano = new qq.maps.Panorama(document.getElementById('pano_container'), {
        pano: '10011001120129111239600',
        pov: {
            heading: 90,
            pitch: 4
        }
    });
    //添加街景覆盖物
    var panolabel = new qq.maps.PanoramaLabel();
    //设置label要显示的街景对象
    panolabel.setPanorama(pano);
    //设置label所在位置
    panolabel.setPosition(new qq.maps.LatLng(39.90473941, 116.3896827));
    //设置label显示的内容
    panolabel.setContent('国家大剧院');
    //设置label的可见性,false为不可见，默认为true
    panolabel.setVisible(true);
    //设置label距地面的高度
    panolabel.setAltitude(70.0);
    //标记label点击事件
    qq.maps.event.addListener(panolabel, 'click', function() {

        alert('该Lable的经纬度为：' + panolabel.getPosition());

    });

}

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;
        }
        p {
            width: 603px;
            padding-top: 3px;
            overflow: hidden;
        }
        .btn {
            width: 142px;
        }
    </style>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=d84d6d83e0e51e481e50454ccbe8986b"></script>

</head>

<body onLoad="init();">
    <script>
        function init() {
            //创建街景
            var pano = new qq.maps.Panorama(document.getElementById('pano_container'), {
                pano: '10011001120129111239600',
                pov: {
                    heading: 90,
                    pitch: 4
                }
            });
            //添加街景覆盖物
            var panolabel = new qq.maps.PanoramaLabel();
            //设置label要显示的街景对象
            panolabel.setPanorama(pano);
            //设置label所在位置
            panolabel.setPosition(new qq.maps.LatLng(39.90473941, 116.3896827));
            //设置label显示的内容
            panolabel.setContent('国家大剧院');
            //设置label的可见性,false为不可见，默认为true
            panolabel.setVisible(true);
            //设置label距地面的高度
            panolabel.setAltitude(70.0);
            //标记label点击事件
            qq.maps.event.addListener(panolabel, 'click', function() {

                alert('该Lable的经纬度为：' + panolabel.getPosition());

            });

        }
    </script>
    <div style="width:603px;height:300px" id="pano_container"></div>
    <p>添加国家大剧院label,标记label点击事件。</p>
</body>

</html>

新窗口打开在线试一试