Control 对象规范

自定义控件，把自己创建的Dom对象放在控件布局（ControlPosition）的任何一个位置上，并自动适应布局位置。

实例

例子 1：

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

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

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

map.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>
</head>

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

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

        map.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>
新窗口打开 在线试一试