通过div实现arcgis自定义infowindow

通过给地图绑定缩放，单击和平移命令，实现在地图附加div标签，实现infowindow效果；

/*
*作者 扰扰
*自定义esri弹窗
*paramter Map地图对象
*paramter x
*paramter y
*paramter title标题
*paramter html展示内容html字符串
*paramter height弹窗高度默认为300
*paramter width弹窗宽度默认为200
*/
RaoRao.esriDivPanel = function (Map, x, y, title, html, height, width) {
    //加载时地图坐标
    var X = x, Y = y, map = Map;
    //弹窗宽度
    var Heigth = 300;
    if (height) { Height = height }
    //弹窗高度
    var Width = 400;
    if (width) { Width = width }
    //弹窗位置
    var top = 0;
    //弹窗位置
    var left = 0;
    //弹窗对象
    var Div = null;
    //移动量
    var movX = 0, movY = 0;
    //变化量
    var tempX = 0, tempY = 0;
    //地图拖拽事件
    this._panEvt = null;
    this._panEndEvt = null;
    //地图所缩放事件
    this._zoomStartEvt = null;
    this._zoomEndEvt = null;
    //弹窗DIV
    this.div = document.createElement("div");
    Div = this.div;
    this.div.className = "esriDivPanel";
    var divcss = '' + Width + 'px;height:' + Heigth + 'px;';
    this.div.style.cssText = divcss;

    this.title = document.createElement("div");
    this.title.className = "esriDivPanel_title";
    var close = document.createElement("div");
    close.className = "esriDivPanel_titleClose";
    close.innerHTML = "<span></span>";

    var titletext = document.createElement("div");
    titletext.className = "esriDivPanel_titleTxt";
    titletext.innerHTML = title;

    this.content = document.createElement("div");
    this.content.className = "esriDivPanel_content";
    this.content.innerHTML = html;
    this.content.style.cssText = "height:" + (Heigth - 32) + "px;";

    this.triangle = document.createElement("div");
    this.triangle.className = "esriDivPanel_triangle";

    this.title.appendChild(close);
    this.title.appendChild(titletext);

    this.div.appendChild(this.title);
    this.div.appendChild(this.content);
    this.div.appendChild(this.triangle);

    var point = new esri.geometry.Point(x, y, map.spatialReference);
    var p = map.toScreen(point);
    top = p.y - Heigth-36;
    left = p.x - Width / 2;
    this.div.style.top = top + "px";
    this.div.style.left = left + "px";
    document.getElementById(map.id).appendChild(this.div);
    //定义地图缩放事件
    this._zoomStartEvt = map.on("zoom-start", function (evt) {
        //Div.style.display = "none";
        var point = new esri.geometry.Point(X, Y, map.spatialReference);
        var p = map.toScreen(point);
        top = p.y - Heigth - 36;
        left = p.x - Width / 2;
        Div.style.top = top + "px";
        Div.style.left = left + "px";
    });
    this._zoomEndEvt = map.on("zoom-end", function (evt) {
        //Div.style.display = "block";
        var point = new esri.geometry.Point(X, Y, map.spatialReference);
        var p = map.toScreen(point);
        top = p.y - Heigth - 36;
        left = p.x - Width / 2;;
        Div.style.top = top + "px";
        Div.style.left = left + "px";
    });
    //定义地图拖拽事件
    this._panEvt = map.on("pan", function (evt) {
        var point = evt.delta;
        movX = point.x - tempX;
        movY = point.y - tempY;
        tempX = point.x; tempY = point.y;
        top = top + movY;
        left = left + movX;
        Div.style.top = top + "px";
        Div.style.left = left + "px";
    });
    this._panEndEvt = map.on("pan-end", function (evt) {
        tempX = 0;
        tempY = 0;
    });
    //定义关闭事件
    close.onclick = function () {
        if (this._panEndEvt) {
            this._panEndEvt.remove();
        }
        if (this._panEvt) {
            this._panEvt.remove();
        }
        if (this._zoomEndEvt) {
            this._zoomEndEvt.remove();
        }
        if (this._zoomStartEvt) {
            this._zoomStartEvt.remove();
        }
        this._panEndEvt = null;
        this._panEvt = null;
        this._zoomEndEvt = null;
        this._zoomStartEvt = null;
        document.getElementById(map.id).removeChild(Div);
    }
}

.esriDivPanel {
    position: absolute;
    z-index: 100;
}

.esriDivPanel_title {
    border: 2px solid #333;
    height: 32px;
    width: 100%;
    background-color: #333;
    border-radius: 5px 5px 0px 0px;
}

.esriDivPanel_titleClose {
    float: right;
    width: 24px;
    height: 24px;
    margin: 5px;
}

    .esriDivPanel_titleClose span {
        display: inline-block;
        width: 100%;
        height: 100%;
        text-align: center;
        overflow: hidden;
        position: relative;
    }

        .esriDivPanel_titleClose span:hover {
            background-color: slategrey;
        }

        .esriDivPanel_titleClose span::before, .esriDivPanel_titleClose span::after {
            position: absolute;
            content: '';
            top: 50%;
            left: 0;
            margin-top: -1px;
            background-color: #fff;
            width: 100%;
            height: 3px;
        }

        .esriDivPanel_titleClose span::before {
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
        }

        .esriDivPanel_titleClose span::after {
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
        }

.esriDivPanel_titleTxt {
    overflow: hidden;
    width: 75%;
    height: 32px;
    line-height: 32px;
    margin-left: 5px;
    color: white;
}

.esriDivPanel_content {
    width: 100%;
    border: 2px solid #8c9794;
    background-color: #f8f8f8;
    overflow: hidden;
}

.esriDivPanel_triangle {
    width: 0px;
    height: 0px;
    margin-left: 50%;
    /* background-color: #8c9794; */
    border-top: 20px solid #333;
    /* border-bottom: 20px solid rgba(140, 151, 148, 0.57); */
    border-right: 40px solid rgba(140, 151, 148, 0);
    border-left: 0px solid rgba(140, 151, 148, 0.26);
}

再系统中引用代码就可以直接调用