qq.maps.Panorama 类

在网页中创建街景。

构造函数

创建Panorama类的语法:

new qq.maps.Panorama(container, options);

参数:

container : {HTMLDivElement}
(必填) 街景容器，实例化一个街景对象需要在网页中创建一个空div元素，参数中需要传入div元素对象或div元素的id。
options : {PanoramaOptions}
(可选) 街景参数，通过这个参数来控制初始化街景的场景点、朝向角度、缩放级别，等等。

方法

方法 返回值 说明
getPano() String 获取当前场景的id。
getPosition() LatLng 获取当前场景点的经纬度信息。
getPov() PanoPov 获取全景查看器的视角。
getVisible() Boolean 获取街景查看器的显示状态（显示/隐藏）。
getZoom() Number 获取当前场景的缩放级别。
setOptions(options:PanoramaOptions) none 设置街景参数
setPano(pano:String) none 设置场景。pano是要设置的场景的id。
setPov(pov:PanoPov) none 设置全景查看器的视角。
setVisible(visible:Boolean) none 设置街景查看器的显示状态。
setZoom(zoom:Number) LatLng 设置缩放级别，没有动画。5>zoom>0

属性

名称 类型 说明
controls Array.<MVCArray.<HTMLDivElement>> 在街景上添加自定义控件

事件

事件名 参数 说明
pano_changed none 场景的id发生改变时会触发此事件。
pov_changed none 俯仰角发生改变时会触发此事件。
zoom_changed none 街景显示器的放大级别发生改变时会触发此事件。
visible_changed none 显示/隐藏状态发生变化时会触发此事件。
pano_changed none 场景的经纬度发生改变时会触发此事件。
error none 场景发生点加载失败的时候触发此事件。
loaded none flash加载成功的时候触发此事件。

实例

本示例中，介绍如何在div容器中创建街景

JavaScript
var init = function() {
    // 创建街景
    var pano = new qq.maps.Panorama(document.getElementById('pano_holder'));
    pano.setOptions({
        //显示移动箭头显示状态
        disableMove: false,
        //隐藏罗盘显示状态
        disableCompass: true
    });
    //设置默认的场景
    pano.setPano('10011001120131111029111');
    //设置查看视角
    pano.setPov({
        heading: 20,
        pitch: 15
    });
    //设置缩放级别，0<zoom<5
    pano.setZoom(1);
    //设置缩放触发事件
    qq.maps.event.addDomListener(pano, 'zoom_changed', function() {
        alert('缩放了街景地图级别：' + pano.getZoom());
    });
    //显示该街景的id
    document.getElementById("pano_id").innerHTML = "该街景的ID为：" + pano.getPano();

}
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;
        }
    </style>
    <script src="https://map.qq.com/api/js?v=2.exp&key=d84d6d83e0e51e481e50454ccbe8986b"></script>
</head>

<body onLoad="init()">
    <script>
        var init = function() {
            // 创建街景
            var pano = new qq.maps.Panorama(document.getElementById('pano_holder'));
            pano.setOptions({
                //显示移动箭头显示状态
                disableMove: false,
                //隐藏罗盘显示状态
                disableCompass: true
            });
            //设置默认的场景
            pano.setPano('10011001120131111029111');
            //设置查看视角
            pano.setPov({
                heading: 20,
                pitch: 15
            });
            //设置缩放级别，0<zoom<5
            pano.setZoom(1);
            //设置缩放触发事件
            qq.maps.event.addDomListener(pano, 'zoom_changed', function() {
                alert('缩放了街景地图级别：' + pano.getZoom());
            });
            //显示该街景的id
            document.getElementById("pano_id").innerHTML = "该街景的ID为：" + pano.getPano();

        }
    </script>
    <div style="width:603px;height:300px" id="pano_holder"></div>
    <p>缩放街景地图时，弹出缩放地图的级别</p>
    <div style="width:603px;height:300px" id="pano_id"></div>
</body>

</html>
新窗口打开 在线试一试

相关文章

PanoramaService

介绍如何通过经纬度获取街景场景点（panoid）信息

PanoramaLayer

介绍如何在地图中展现有街景数据的区域