Class:覆盖物/Overlay - 腾讯地图API

qq.maps.Overlay 类

继承自MVCObject类

自定义覆盖物，通过继承此类，可以自定义Dom元素的样式及事件。

构造函数

构造函数
`Overlay()`

方法

方法	返回值	说明
`construct()`	`none`	实现这个接口来初始化自定义的Dom元素，此方法会在setMap(map)后被调用，panes和projection属性也将被初始化。
`draw()`	`none`	实现这个接口来绘制和更新自定义的dom元素。
`destroy()`	`none`	实现这个接口来删除自定义的Dom元素，此方法会在setMap(null)后被调用。
`getMap()`	`Map`	返回覆盖物容器所在的map对象。
`getPanes()`	`MapPanes`	返回地图覆盖物容器列表。
`getProjection()`	`MapCanvasProjection`	返回覆盖物容器的相对像素坐标或是经纬度坐标。
`setMap(map:Map)`	`none`	设置覆盖物容器所在的map对象。

实例

本示例中，介绍如何通过继承Overlay创建简单的自定义覆盖物

JavaScript

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

function CustomOverlay(position, index) {
    this.index = index;
    this.position = position;
}
CustomOverlay.prototype = new qq.maps.Overlay();
//定义construct,实现这个接口来初始化自定义的Dom元素
CustomOverlay.prototype.construct = function() {
    var div = this.div = document.createElement("div");
    var divStyle = this.div.style;
    divStyle.position = "absolute";
    divStyle.width = "24px";
    divStyle.height = "24px";
    divStyle.backgroundColor = "#FFFFFF";
    divStyle.border = "1px solid #000000";
    divStyle.textAlign = "center";
    divStyle.lineHeight = "24px";
    divStyle.borderRadius = "15px";
    divStyle.cursor = "pointer";
    this.div.innerHTML = this.index;
    //将dom添加到覆盖物层
    var panes = this.getPanes();
    //设置panes的层级，overlayMouseTarget可接收点击事件
    panes.overlayMouseTarget.appendChild(div);

    var self = this;
    this.div.onclick = function() {
        alert(self.index);
    }
}
//实现draw接口来绘制和更新自定义的dom元素
CustomOverlay.prototype.draw = function() {
    var overlayProjection = this.getProjection();
    //返回覆盖物容器的相对像素坐标
    var pixel = overlayProjection.fromLatLngToDivPixel(this.position);
    var divStyle = this.div.style;
    divStyle.left = pixel.x - 12 + "px";
    divStyle.top = pixel.y - 12 + "px";
}
//实现destroy接口来删除自定义的Dom元素，此方法会在setMap(null)后被调用
CustomOverlay.prototype.destroy = function() {
    this.div.onclick = null;
    this.div.parentNode.removeChild(this.div);
    this.div = null
}
var latlng = map.getCenter();
var overlay = new CustomOverlay(latlng, 0);
overlay.setMap(map);

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" style="width:603px;height:300px"></div>
    <script>
        var map = new qq.maps.Map(document.getElementById("container"));

        function CustomOverlay(position, index) {
            this.index = index;
            this.position = position;
        }
        CustomOverlay.prototype = new qq.maps.Overlay();
         //定义construct,实现这个接口来初始化自定义的Dom元素
        CustomOverlay.prototype.construct = function() {
            var div = this.div = document.createElement("div");
            var divStyle = this.div.style;
            divStyle.position = "absolute";
            divStyle.width = "24px";
            divStyle.height = "24px";
            divStyle.backgroundColor = "#FFFFFF";
            divStyle.border = "1px solid #000000";
            divStyle.textAlign = "center";
            divStyle.lineHeight = "24px";
            divStyle.borderRadius = "15px";
            divStyle.cursor = "pointer";
            this.div.innerHTML = this.index;
            //将dom添加到覆盖物层
            var panes = this.getPanes();
            //设置panes的层级，overlayMouseTarget可接收点击事件
            panes.overlayMouseTarget.appendChild(div);

            var self = this;
            this.div.onclick = function() {
                alert(self.index);
            }
        }
         //实现draw接口来绘制和更新自定义的dom元素
        CustomOverlay.prototype.draw = function() {
            var overlayProjection = this.getProjection();
            //返回覆盖物容器的相对像素坐标
            var pixel = overlayProjection.fromLatLngToDivPixel(this.position);
            var divStyle = this.div.style;
            divStyle.left = pixel.x - 12 + "px";
            divStyle.top = pixel.y - 12 + "px";
        }
         //实现destroy接口来删除自定义的Dom元素，此方法会在setMap(null)后被调用
        CustomOverlay.prototype.destroy = function() {
            this.div.onclick = null;
            this.div.parentNode.removeChild(this.div);
            this.div = null
        }
        var latlng = map.getCenter();
        var overlay = new CustomOverlay(latlng, 0);
        overlay.setMap(map);
    </script>
</body>

</html>

新窗口打开在线试一试