controls 属性（Panorama）

在街景上添加自定义控件

语法

panorama.controls[qq.maps.ControlPosition.TOP_CENTER].push(customControlDiv)

类型

Array.<MVCArray.<HTMLDivElement>>

实例

示例 1：

本示例中，介绍如何把自己的创建一个dom节点，定义为街景控件

JavaScript
var panorama = new qq.maps.Panorama(document.getElementById("container"), {
    "pano": "10011001120129111239600"
});

var customZoomDiv = document.createElement("div");
customZoomDiv.style.cssText = "padding:5px;border:2px solid #86acf2;background:#ffffff";
customZoomDiv.index = 1; //设置在当前布局中的位置
function update() {
    customZoomDiv.innerHTML = "街景缩放级别：" + panorama.getZoom();
}
qq.maps.event.addDomListener(panorama, "zoom_changed", update);
update();

panorama.controls[qq.maps.ControlPosition.TOP_CENTER].push(customZoomDiv);
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>
        html,
        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        #container {
            width: 100%;
            height: 100%
        }
    </style>
    <!--<script src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>-->
    <script src="http://mobile1.map.qq.com/kexinwu/sosoapi/main.js"></script>
</head>

<body>
    <div id="container"></div>
    <script>
        var panorama = new qq.maps.Panorama(document.getElementById("container"), {
            "pano": "10011001120129111239600"
        });

        var customZoomDiv = document.createElement("div");
        customZoomDiv.style.cssText = "padding:5px;border:2px solid #86acf2;background:#ffffff";
        customZoomDiv.index = 1; //设置在当前布局中的位置
        function update() {
            customZoomDiv.innerHTML = "街景缩放级别：" + panorama.getZoom();
        }
        qq.maps.event.addDomListener(panorama, "zoom_changed", update);
        update();

        panorama.controls[qq.maps.ControlPosition.TOP_CENTER].push(customZoomDiv);
    </script>
</body>

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

示例 2：

本示例中，以地图为例，介绍如何控制自定义控件的顺序

JavaScript
var map = new qq.maps.Map(document.getElementById("container"));

var controlStyle = "padding:5px;border:2px solid #86acf2;background:#ffffff";

var leftControl = document.createElement("div");
leftControl.style.cssText = controlStyle;
leftControl.innerHTML = "左";
leftControl.index = 1; //设置在当前布局中的顺序

var rightControl = document.createElement("div");
rightControl.style.cssText = controlStyle;
rightControl.innerHTML = "右";
rightControl.index = 3;

var middleControl = document.createElement("div");
middleControl.style.cssText = controlStyle;
middleControl.innerHTML = "中";
middleControl.index = 2;
middleControl.style.margin = "0 5px"; //通过margin可以控制控件间的间距

//只要设置了index，插入顺序就可以是乱序的了
map.controls[qq.maps.ControlPosition.TOP_CENTER].push(middleControl);
map.controls[qq.maps.ControlPosition.TOP_CENTER].push(leftControl);
map.controls[qq.maps.ControlPosition.TOP_CENTER].push(rightControl);
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>
        html,
        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        #container {
            width: 100%;
            height: 100%
        }
    </style>
    <script src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
</head>

<body>
    <div id="container"></div>
    <script>
        var map = new qq.maps.Map(document.getElementById("container"));

        var controlStyle = "padding:5px;border:2px solid #86acf2;background:#ffffff";

        var leftControl = document.createElement("div");
        leftControl.style.cssText = controlStyle;
        leftControl.innerHTML = "左";
        leftControl.index = 1; //设置在当前布局中的顺序

        var rightControl = document.createElement("div");
        rightControl.style.cssText = controlStyle;
        rightControl.innerHTML = "右";
        rightControl.index = 3;

        var middleControl = document.createElement("div");
        middleControl.style.cssText = controlStyle;
        middleControl.innerHTML = "中";
        middleControl.index = 2;
        middleControl.style.margin = "0 5px"; //通过margin可以控制控件间的间距

         //只要设置了index，插入顺序就可以是乱序的了
        map.controls[qq.maps.ControlPosition.TOP_CENTER].push(middleControl);
        map.controls[qq.maps.ControlPosition.TOP_CENTER].push(leftControl);
        map.controls[qq.maps.ControlPosition.TOP_CENTER].push(rightControl);
    </script>
</body>

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

相关文章

Control

更多自定义控件的使用方法参考Control