JavaScript API

Control 对象规范

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

实例

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

<!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：
本示例中，介绍如何控制组件间的顺序和间隔

<!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>

在线试一试

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

已解决

未解决