自定义DOM覆盖物（DOMOverlay）

      自定义DOM（DOMOverlay）覆盖物，使您可以创建HTML DOM对象做为覆盖物叠加到地图中，实现您所期望的各类需求，如制作您独特风格的信息窗口，叠加表格、img和svg图片、动画、文字、甚至视频以及浏览器可支持的HTML代码。

示例，将饼图覆盖到地图中：

查看在线示例

自定义DOM覆盖物-SVG图层
示例，通过domoverlay添加svg图层:
在地图之上通过创建一个覆盖地图的svg元素，在其上创建多个svg子节点（如circle，text等），提高可创建元素数量，并通过给子元素添加交互事件，快速实现元素交互功能。

查看在线示例

自定义 DOM 覆盖物-gif 图层
示例，通过 domoverlay 添加 gif 图层:
在地图之上通过创建一个覆盖地图的 gif 元素

查看在线示例

详细使用说明：
为了您能够快速上手，以下代码为您演示了一个最简单的DOMOverlay的定义与使用的方法，供您参考：
（代码执行后显示地图，并创建自定义infoWindow，初始文字“Hello world!”，两秒钟后变为：“你好再见~” ）

//自定义DOM覆盖物 - 继承DOMOverlay
function myInfoWindow(options) {
    var mydom;
    TMap.DOMOverlay.call(this, options);
}
myInfoWindow.prototype = new TMap.DOMOverlay();
 
// 初始化
myInfoWindow.prototype.onInit = function(options) {
    this.position = options.position;
    this.content = options.content;
};
 
// 创建DOM元素，返回一个DOMElement
myInfoWindow.prototype.createDOM = function() {
    mydom=document.createElement("div");
    //设置DOM样式
    mydom.style.cssText = 'height:15px;max-width:120px;padding:5px;background:#fff;border:#ccc solid 1px;\
                        line-height:15px;font-size:12px;position:absolute;top:0px;left:0px;';
    mydom.innerHTML=this.content;
    return mydom;
};
 
// 更新DOM元素，在地图移动/缩放后执行
myInfoWindow.prototype.updateDOM = function() {
    if (!this.map) {
        return;
    }
 
    // 经纬度坐标转容器像素坐标
    let pixel = this.map.projectToContainer(this.position);
 
    //默认使用DOM左上角作为坐标焦点进行绘制（左上对齐）
    //如想以DOM中心点（横向&垂直居中）或其它位置为焦点，可结合this.dom.clientWidth和this.dom.clientHeight自行计算
    let left = pixel.getX() - this.dom.clientWidth / 2 + 'px'; //本例水平居中
    let top = pixel.getY() + 'px';
     
    //将平面坐标转为三维空间坐标
    this.dom.style.transform = `translate3d(${left}, ${top}, 0px)`;
};
 
//自定义一个更新内容的方法 
myInfoWindow.prototype.updateContent = function(content) {
    mydom.innerHTML=content;
};
 
 
var mapOne;//定义地图对象
function initMap() {
    // 初始化地图
    mapOne = new TMap.Map("container", {
        zoom:12, // 设置地图缩放级别
        center: new TMap.LatLng(39.984104, 116.307503) // 设置地图中心点坐标
    });
     
    //创建一个自定义的infoWindow
    var myIW = new myInfoWindow({
        map:mapOne,
        position: new TMap.LatLng(39.96030543872138, 116.25809083213608),
        content:"Hello world!"
    })
    //两秒钟后更新文字内容
    setTimeout(function(){myIW.updateContent("你好再见~")},2000);
     
}