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);
<!DOCTYPE html>
<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>
<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>
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);
<!DOCTYPE html>
<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>
<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>
