通过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:' + 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:;
 }

 .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:;
             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);
 }

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