arcgis自定义infowindow

define([
        "dojo/Evented",
        "dojo/on",
        "dojo/query",
        "dojo/_base/declare",
        "dojo/dom-construct",
        "dojo/dom-attr",
        "dojo/_base/array",
        "dojo/dom-style",
        "dojo/_base/lang", 
        "dojo/dom-class",
        "dijit/_TemplatedMixin",/*为了使用我在第一步拷贝下来的HTML模板*/
        "esri/domUtils",
        "esri/InfoWindowBase",
        "esri/geometry/ScreenPoint",
        "esri/geometry/screenUtils",/*为了实现地理坐标和屏幕坐标的准确转换*/
        "esri/geometry/webMercatorUtils",
        "dojo/text!./htmlTemplate/BubblePopup.html"
    ],
    function (Evented,
              on,
              query,
              declare,
              domConstruct,
              domAttr,
              array,
              domStyle,
              lang,
              domClass,
              _TemplatedMixin,
              domUtils,
              InfoWindowBase, ScreenPoint, screenUtils, webMercatorUtils, template) {
        var showMapPoint = null; /*是一个全局的变量，用来记录popup的地理坐标位置*/
        return declare([InfoWindowBase, Evented, _TemplatedMixin], {

            templateString: template, /*_TemplateMixin模块的一个属性，用来保存HTML模板*/
            _events: [],  /*是一个数组，用来存储相关的事件，在popup被释放时释放注册的事件*/
            constructor: function (parameters) {
                lang.mixin(this, parameters);
            },
            _createInfoWindowInstance: function (map) {
                this.domNode = domConstruct.create("div", { id: 'infoPanel' }, map.id + "_root");
                this.domNode.innerHTML = '<div id="infoHeader"></div><div id="infoContent"><table></table></div>';
                //this.domNode.innerHTML = this.templateString;
                this._content = query("#infoPanel #infoContent");
                this._title = query("#infoPanel #infoHeader");
                this._flash = query("#infoPanel .flash");
                //hide initial display
                domUtils.hide(this.domNode);                
                this.isShowing = false;
            },
            setMap: function (map) {
                this.inherited(arguments);//会调用父类(基类)中的同名方法
                this._events = [];
                this._createInfoWindowInstance(map);

                this._events.push(map.on("pan", lang.hitch(this, function (evt) {
                    if (this.isShowing) {
                        this._showInfoWindow(evt.extent);
                    }
                })));

                this._events.push(map.on("zoom-start", lang.hitch(this, function (evt) {
                    this.hide();
                })));

                this._events.push(map.on("zoom-end", lang.hitch(this, function (evt) {
                    if (this.isShowing) {
                        this._showInfoWindow(evt.extent);
                    }
                })));
            },
            unsetMap: function (map) {
                this.inherited(arguments);
                array.forEach(this._events, function (event) {
                    event.remove();
                });
            },
            setTitle: function (title, className) {
                this._title.forEach(function (node){
                  node.innerHTML = title;
                  domClass.remove(node);
                  domClass.add(node, className);
                });
            },
            setContent: function (content) {                
                this._content.forEach(function (node) {
                    node.innerHTML = content;
                });
            },
            _showInfoWindow: function (extent) {
                if (showMapPoint == null)return;
                var showScreenPoint = screenUtils.toScreenGeometry(extent, this.map.width, this.map.height, showMapPoint);
                domStyle.set(this.domNode, {
                    "left": (showScreenPoint.x) + 7 + "px",
                    "top": (showScreenPoint.y) + 7 +"px" 
                });

                domUtils.show(this.domNode);
                this.isShowing = true;
                this.onShow();
            },
            show: function (location) {
                showMapPoint = location;
                if (webMercatorUtils.canProject(location, this.map)) {
                    showMapPoint = webMercatorUtils.project(location, this.map);
                }
                if (showMapPoint.spatialReference) {
                    var screenPoint = this.map.toScreen(showMapPoint);
                    domStyle.set(this.domNode, {
                        "left": (screenPoint.x)+ 7 + "px",
                        "top": (screenPoint.y) + 7 + "px"
                    });
                }
                //display the info window
                domUtils.show(this.domNode);
                this.isShowing = true;
                this.onShow();
            },
            hide: function () {
                if (this.isShowing) {
                    domUtils.hide(this.domNode);
                    this.isShowing = false;
                    this.onHide();
                }
            },
            resize: function (width, height) {
                domStyle.set(this._content, {
                    "width": width + "px",
                    "height": height + "px"
                });
            },
            remove: function () {
                this.hide();
                showMapPoint = null;
            },
            destroy: function () {
                domConstruct.destroy(this.domNode);
            }
        });
    });