1 define([  2         "dojo/Evented",  3         "dojo/on",  4         "dojo/query",  5         "dojo/_base/declare",  6         "dojo/dom-construct",  7         "dojo/dom-attr",  8         "dojo/_base/array",  9         "dojo/dom-style", 10         "dojo/_base/lang",  11         "dojo/dom-class", 12         "dijit/_TemplatedMixin",/*为了使用我在第一步拷贝下来的HTML模板*/ 13         "esri/domUtils", 14         "esri/InfoWindowBase", 15         "esri/geometry/ScreenPoint", 16         "esri/geometry/screenUtils",/*为了实现地理坐标和屏幕坐标的准确转换*/ 17         "esri/geometry/webMercatorUtils", 18         "dojo/text!./htmlTemplate/BubblePopup.html" 19     ], 20     function (Evented, 21               on, 22               query, 23               declare, 24               domConstruct, 25               domAttr, 26               array, 27               domStyle, 28               lang, 29               domClass, 30               _TemplatedMixin, 31               domUtils, 32               InfoWindowBase, ScreenPoint, screenUtils, webMercatorUtils, template) { 33         var showMapPoint = null; /*是一个全局的变量，用来记录popup的地理坐标位置*/ 34         return declare([InfoWindowBase, Evented, _TemplatedMixin], { 35  36             templateString: template, /*_TemplateMixin模块的一个属性，用来保存HTML模板*/ 37             _events: [],  /*是一个数组，用来存储相关的事件，在popup被释放时释放注册的事件*/ 38             constructor: function (parameters) { 39                 lang.mixin(this, parameters); 40             }, 41             _createInfoWindowInstance: function (map) { 42                 this.domNode = domConstruct.create("div", { id: ‘infoPanel‘ }, map.id + "_root"); 43                 this.domNode.innerHTML = ‘<div id="infoHeader"></div><div id="infoContent"><table></table></div>‘; 44                 //this.domNode.innerHTML = this.templateString; 45                 this._content = query("#infoPanel #infoContent"); 46                 this._title = query("#infoPanel #infoHeader"); 47                 this._flash = query("#infoPanel .flash"); 48                 //hide initial display 49                 domUtils.hide(this.domNode);                 50                 this.isShowing = false; 51             }, 52             setMap: function (map) { 53                 this.inherited(arguments);//会调用父类(基类)中的同名方法 54                 this._events = []; 55                 this._createInfoWindowInstance(map); 56  57                 this._events.push(map.on("pan", lang.hitch(this, function (evt) { 58                     if (this.isShowing) { 59                         this._showInfoWindow(evt.extent); 60                     } 61                 }))); 62  63                 this._events.push(map.on("zoom-start", lang.hitch(this, function (evt) { 64                     this.hide(); 65                 }))); 66  67                 this._events.push(map.on("zoom-end", lang.hitch(this, function (evt) { 68                     if (this.isShowing) { 69                         this._showInfoWindow(evt.extent); 70                     } 71                 }))); 72             }, 73             unsetMap: function (map) { 74                 this.inherited(arguments); 75                 array.forEach(this._events, function (event) { 76                     event.remove(); 77                 }); 78             }, 79             setTitle: function (title, className) { 80                 this._title.forEach(function (node){ 81                   node.innerHTML = title; 82                   domClass.remove(node); 83                   domClass.add(node, className); 84                 }); 85             }, 86             setContent: function (content) {                 87                 this._content.forEach(function (node) { 88                     node.innerHTML = content; 89                 }); 90             }, 91             _showInfoWindow: function (extent) { 92                 if (showMapPoint == null)return; 93                 var showScreenPoint = screenUtils.toScreenGeometry(extent, this.map.width, this.map.height, showMapPoint); 94                 domStyle.set(this.domNode, { 95                     "left": (showScreenPoint.x) + 7 + "px", 96                     "top": (showScreenPoint.y) + 7 +"px"  97                 }); 98  99                 domUtils.show(this.domNode);100                 this.isShowing = true;101                 this.onShow();102             },103             show: function (location) {104                 showMapPoint = location;105                 if (webMercatorUtils.canProject(location, this.map)) {106                     showMapPoint = webMercatorUtils.project(location, this.map);107                 }108                 if (showMapPoint.spatialReference) {109                     var screenPoint = this.map.toScreen(showMapPoint);110                     domStyle.set(this.domNode, {111                         "left": (screenPoint.x)+ 7 + "px",112                         "top": (screenPoint.y) + 7 + "px"113                     });114                 }115                 //display the info window116                 domUtils.show(this.domNode);117                 this.isShowing = true;118                 this.onShow();119             },120             hide: function () {121                 if (this.isShowing) {122                     domUtils.hide(this.domNode);123                     this.isShowing = false;124                     this.onHide();125                 }126             },127             resize: function (width, height) {128                 domStyle.set(this._content, {129                     "width": width + "px",130                     "height": height + "px"131                 });132             },133             remove: function () {134                 this.hide();135                 showMapPoint = null;136             },137             destroy: function () {138                 domConstruct.destroy(this.domNode);139             }140         });141     });