通过给地图绑定缩放，单击和平移命令，实现在地图附加div标签，实现infowindow效果；
1 /* 2 *作者 扰扰 3 *自定义esri弹窗 4 *paramter Map地图对象 5 *paramter x 6 *paramter y 7 *paramter title标题 8 *paramter html展示内容html字符串 9 *paramter height弹窗高度默认为300 10 *paramter width弹窗宽度默认为200 11 */ 12 RaoRao.esriDivPanel = function (Map, x, y, title, html, height, width) { 13 //加载时地图坐标 14 var X = x, Y = y, map = Map; 15 //弹窗宽度 16 var Heigth = 300; 17 if (height) { Height = height } 18 //弹窗高度 19 var Width = 400; 20 if (width) { Width = width } 21 //弹窗位置 22 var top = 0; 23 //弹窗位置 24 var left = 0; 25 //弹窗对象 26 var Div = null; 27 //移动量 28 var movX = 0, movY = 0; 29 //变化量 30 var tempX = 0, tempY = 0; 31 //地图拖拽事件 32 this._panEvt = null; 33 this._panEndEvt = null; 34 //地图所缩放事件 35 this._zoomStartEvt = null; 36 this._zoomEndEvt = null; 37 //弹窗DIV 38 this.div = document.createElement("div"); 39 Div = this.div; 40 this.div.className = "esriDivPanel"; 41 var divcss = 'width:' + Width + 'px;height:' + Heigth + 'px;'; 42 this.div.style.cssText = divcss; 43 44 this.title = document.createElement("div"); 45 this.title.className = "esriDivPanel_title"; 46 var close = document.createElement("div"); 47 close.className = "esriDivPanel_titleClose"; 48 close.innerHTML = "<span></span>"; 49 50 var titletext = document.createElement("div"); 51 titletext.className = "esriDivPanel_titleTxt"; 52 titletext.innerHTML = title; 53 54 this.content = document.createElement("div"); 55 this.content.className = "esriDivPanel_content"; 56 this.content.innerHTML = html; 57 this.content.style.cssText = "height:" + (Heigth - 32) + "px;"; 58 59 this.triangle = document.createElement("div"); 60 this.triangle.className = "esriDivPanel_triangle"; 61 62 this.title.appendChild(close); 63 this.title.appendChild(titletext); 64 65 this.div.appendChild(this.title); 66 this.div.appendChild(this.content); 67 this.div.appendChild(this.triangle); 68 69 var point = new esri.geometry.Point(x, y, map.spatialReference); 70 var p = map.toScreen(point); 71 top = p.y - Heigth-36; 72 left = p.x - Width / 2; 73 this.div.style.top = top + "px"; 74 this.div.style.left = left + "px"; 75 document.getElementById(map.id).appendChild(this.div); 76 //定义地图缩放事件 77 this._zoomStartEvt = map.on("zoom-start", function (evt) { 78 //Div.style.display = "none"; 79 var point = new esri.geometry.Point(X, Y, map.spatialReference); 80 var p = map.toScreen(point); 81 top = p.y - Heigth - 36; 82 left = p.x - Width / 2; 83 Div.style.top = top + "px"; 84 Div.style.left = left + "px"; 85 }); 86 this._zoomEndEvt = map.on("zoom-end", function (evt) { 87 //Div.style.display = "block"; 88 var point = new esri.geometry.Point(X, Y, map.spatialReference); 89 var p = map.toScreen(point); 90 top = p.y - Heigth - 36; 91 left = p.x - Width / 2;; 92 Div.style.top = top + "px"; 93 Div.style.left = left + "px"; 94 }); 95 //定义地图拖拽事件 96 this._panEvt = map.on("pan", function (evt) { 97 var point = evt.delta; 98 movX = point.x - tempX; 99 movY = point.y - tempY; 100 tempX = point.x; tempY = point.y; 101 top = top + movY; 102 left = left + movX; 103 Div.style.top = top + "px"; 104 Div.style.left = left + "px"; 105 }); 106 this._panEndEvt = map.on("pan-end", function (evt) { 107 tempX = 0; 108 tempY = 0; 109 }); 110 //定义关闭事件 111 close.onclick = function () { 112 if (this._panEndEvt) { 113 this._panEndEvt.remove(); 114 } 115 if (this._panEvt) { 116 this._panEvt.remove(); 117 } 118 if (this._zoomEndEvt) { 119 this._zoomEndEvt.remove(); 120 } 121 if (this._zoomStartEvt) { 122 this._zoomStartEvt.remove(); 123 } 124 this._panEndEvt = null; 125 this._panEvt = null; 126 this._zoomEndEvt = null; 127 this._zoomStartEvt = null; 128 document.getElementById(map.id).removeChild(Div); 129 } 130 }