各位看到这个标题不要嫌烦，因为本人最近一直在研究相关的问题，所以相关文章也只能是这些，同时希望看过我的文章的朋友，我的文章能够给你帮助。
在前面的两篇相关的文章里面，实现InfoWindow是通过div的东西实现的，本文要讲的是通过集成InfoWindowBase实现infowindow的。实现后InfoWindow主要修改了arcgis原来的样式，并加入了InfoWindow出界的处理。
源代码奉上：
myInfoWindow/InfoWindow.js
define([
"dojo/Evented",
"dojo/parser", "dojo/on", "dojo/_base/declare", "dojo/dom-construct", "dojo/_base/array", "dojo/dom-style", "dojo/_base/lang", "dojo/dom-class", "dojo/fx", "dojo/Deferred", "esri/domUtils", "esri/InfoWindowBase" ], function( Evented, parser, on, declare, domConstruct, array, domStyle, lang, domClass, coreFx, Deferred, domUtils, InfoWindowBase ) { var infoWidth,infoHeight; var initMapCenter,initScreenCenter; var showMapPoint,showScreenPoint=null; return declare([InfoWindowBase, Evented], { constructor: function(parameters) { lang.mixin(this, parameters); domClass.add(this.domNode, "myInfoWindow"); this._closeButton = domConstruct.create("div",{"class": "close", "title": "关闭"}, this.domNode); this._title = domConstruct.create("div",{"class": "title"}, this.domNode); this._content = domConstruct.create("div",{"class": "content"}, this.domNode); this._arrow = domConstruct.create("div",{"class": "arrow"}, this.domNode); on(this._closeButton, "click", lang.hitch(this, function(){ //hide the content when the info window is toggled close. this.hide(); })); //hide initial display domUtils.hide(this.domNode); this.isShowing = false; }, setMap: function(map) { this.inherited(arguments); map.on("pan", lang.hitch(this, function(pan){ var movePoint=pan.delta; if(this.isShowing) { if(showScreenPoint!=null) { this._showInfoWindow(showScreenPoint.x+movePoint.x,showScreenPoint.y+movePoint.y); } } })); map.on("pan-end", lang.hitch(this, function(panend){ var movedelta=panend.delta; if(this.isShowing){ showScreenPoint.x=showScreenPoint.x+movedelta.x; showScreenPoint.y=showScreenPoint.y+movedelta.y; } })); map.on("zoom-start", lang.hitch(this, function(){ domUtils.hide(this.domNode); this.onHide(); })); map.on("zoom-end", lang.hitch(this, function(){ if(this.isShowing){ showScreenPoint=this.map.toScreen(showMapPoint); this._showInfoWindow(showScreenPoint.x,showScreenPoint.y); } })); }, setTitle: function(title){ this.place(title, this._title); }, setContent: function(content){ this.place(content, this._content); }, _showInfoWindow:function(x,y) { //Position 10x10 pixels away from the specified location domStyle.set(this.domNode,{ "left": x - infoWidth/2 + 15 + "px", "top": y - infoHeight-75 + "px" }); //display the info window domUtils.show(this.domNode); }, show: function(location) { showMapPoint=location; initMapCenter=this.map.extent.getCenter(); initScreenCenter=this.map.toScreen(initMapCenter); infoHeight= $(".myInfoWindow").height(); infoWidth= $(".myInfoWindow").width(); if(location.spatialReference){ location = this.map.toScreen(location); } var left=location.x-infoWidth/2; var top=location.y-infoHeight-75; showScreenPoint=location; if(top<5) { initScreenCenter.y=initScreenCenter.y+top-5; } if(left<5) { initScreenCenter.x=initScreenCenter.x+left-5; } this._showInfoWindow(showScreenPoint.x,showScreenPoint.y); initMapCenter=this.map.toMap(initScreenCenter); this.map.centerAt(initMapCenter); this.isShowing = true; this.onShow(); }, hide: function(){ domUtils.hide(this.domNode); this.isShowing = false; this.onHide(); }, resize: function(width, height){ domStyle.set(this._content,{ "width": width + "px", "height": (height-60) + "px" }); domStyle.set(this._title,{ "width": width + "px" }); }, destroy: function(){ domConstruct.destroy(this.domNode); this._closeButton = this._title = this._content = null; } }); return InfoWindow; });
myInfoWindow/InfoWindow.css
.myInfoWindow { position: absolute; z-index: 100; font-family: sans-serif; font-size: 12px; } .dj_ie .myInfoWindow { border: 1px solid black; } .myInfoWindow .content { position: relative; background-color:#EFECCA; color:#002F2F; overflow: auto; padding-top:5px; padding-bottom:5px; padding-left:5px; } .myInfoWindow .arrow { position: absolute; width: 0px; height: 0px; line-height: 0px;/*为了防止ie下出现题型*/ border-top: 60px solid #EFECCA; border-left: 5px solid transparent; border-right: 20px solid transparent; left: 45%; bottom: -60px; } .myInfoWindow .close { position: absolute; top: 7px; right: 5px; cursor: pointer; background: url(http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dijit/themes/claro/layout/images/tabClose.png) no-repeat scroll 0 0 transparent; width: 12px; height: 12px; } .myInfoWindow .close:hover { background-color: #F7FCFF; } .myInfoWindow .title { font-weight: bold; background-color:#046380; color:#E6E2AF; padding-top:5px; padding-bottom:5px; padding-left:5px; }
test.html
<!DOCTYPE html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Custom Info Window</title> <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css"> <link rel="stylesheet" href="myModules/InfoWindow.css"> <style> html, body, #mapDiv { height: 100%; width: 100%; margin: 0; padding: 0; } </style> <script> var dojoConfig = { parseOnLoad:true, packages: [{ "name": "myModules", "location": location.pathname.replace(/\/[^/]+$/, "") + "/myModules" }] }; </script> <script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script> <script src="jquery.min.js"></script> <script> require([ "dojo/dom", "dojo/dom-construct", "esri/map", "myModules/InfoWindow", "esri/layers/ArcGISTiledMapServiceLayer", "esri/symbols/PictureMarkerSymbol",//图片点符号 "esri/renderers/SimpleRenderer", //简单渲染 "esri/layers/FeatureLayer", "esri/InfoTemplate", "dojo/string", "dojo/domReady!" ], function( dom, domConstruct, Map, InfoWindow, ArcGISTiledMapServiceLayer, PictureMarkerSymbol, SimpleRenderer, FeatureLayer, InfoTemplate, string ) { //create the custom info window specifying any input options var infoWindow = new InfoWindow({ domNode: domConstruct.create("div", null, dom.byId("mapDiv")) }); var map = new Map("mapDiv", { logo:false, basemap: "gray", center: [-98.57, 39.82], zoom: 4, zoom: 4, slider: true, infoWindow: infoWindow }); //define the info template that is used to display the popup content. var template = new InfoTemplate(); template.setTitle("<b>${name}</b>"); template.setContent("hello"); template.setContent("<h1>我是中国人民的儿子</h1><br>你妹啊！！！"); var featurelayercity = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Boston_Marathon/FeatureServer/0", { mode: FeatureLayer.MODE_SNAPSHOT, infoTemplate: template, outFields: ["*"] }); var pmsRed = new PictureMarkerSymbol('../images/location_icon_blue.png', 20, 20).setOffset(0, 15); //简单渲染 var sr=new SimpleRenderer(pmsRed); featurelayercity.setRenderer(sr); map.addLayer(featurelayercity); //resize the info window map.infoWindow.resize(400, 200); }); </script> </head> <body> <div id="mapDiv"></div> </body> </html>