JavaScript 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创建简单的自定义覆盖物

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

在线试一试

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

已解决

未解决