描述
本例展示当用户在要素上悬停鼠标时如何显示InfoWindow。本例中，要素是查询USA州图层的QueryTask的查询结果。工作流程如下:
1.用户单击一个要素
2.要素是“加亮的”图形。
3.用户在图形上悬停鼠标，看到属性信息的信息窗口。
如果想要在任意要素上悬停鼠标来查看信息窗口，见示例加载查询结构，悬停显示。
当用户在要素上移动鼠标时，下面的事件监听器格式化并显示信息窗口:
dojo.connect(map.graphics, "onMouseMove", function(evt) {
var g = evt.graphic;
map.infoWindow.setContent(g.getContent());
map.infoWindow.setTitle(g.getTitle());
map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
});
还有一个监听器是必要的，一旦鼠标移出要素隐藏信息窗口:
dojo.connect(map.graphics, "onMouseOut", function() {map.infoWindow.hide();} );
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 6 <meta http-equiv="X-UA-Compatible" content="IE=7" /> 7 <title>QueryTask with geometry, results as an InfoWindow</title> 8 <link rel="stylesheet" type="text/css" 9 href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css"> 10 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script> 11 <script type="text/javascript" language="Javascript"> 12 dojo.require("esri.map"); 13 dojo.require("esri.tasks.query"); 14 15 var map, queryTask, query; 16 var symbol, infoTemplate; 17 18 function init() { 19 //创建地图 20 map = new esri.Map("mapDiv"); 21 22 //创建并添加层 23 var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer"); 24 map.addLayer(layer); 25 26 //注册监听click事件，当用户点击地图时执行executeQueryTask方法 27 dojo.connect(map, "onClick", executeQueryTask); 28 29 30 //建立查询任务 31 queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/1"); 32 33 //监听onComplete事件的处理结果，使用queryTask.execute方法回调 34 dojo.connect(queryTask, "onComplete", showResults); 35 36 //建立查询过滤器 37 query = new esri.tasks.Query(); 38 query.returnGeometry = true; 39 query.outFields = ["STATE_NAME", 40 "STATE_FIPS", "STATE_ABBR", "HYPERLINK", "AREA"]; 41 42 //在信息窗口创建infoTemplate 43 //${属性名}将取代目前的功能和属性值. 44 infoTemplate = new esri.InfoTemplate("${STATE_NAME}", "State Fips:${STATE_FIPS}<br>Abbreviation: ${STATE_ABBR}<br/>Area: ${AREA}"); 45 46 symbol = new esri.symbol.SimpleFillSymbol( 47 esri.symbol.SimpleFillSymbol.STYLE_SOLID, 48 new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, 49 new dojo.Color([255,0,0]), 2), 50 new dojo.Color([255,255,0,0.5]) 51 ); 52 } 53 54 function executeQueryTask(evt) { 55 //用户点击onClick事件返回地图上EVT点. 56 //包含在MapPoint(esri.geometry.point)和screenPoint(pixel像素点). 57 //设置查询几何等于evt.mapPoint 58 query.geometry = evt.mapPoint; 59 60 //执行任务和完成showResults 61 queryTask.execute(query, showResults); 62 } 63 64 function showResults(featureSet) { 65 //删除地图上所有的图形层 66 map.graphics.clear(); 67 68 var features = featureSet.features; 69 70 //QueryTask返回featureSet类型.通过featureSet的循环把他们添加到信息窗口 71 for (var i=0, il=features.length; i<il; i++) { 72 //从featureSet中得到当前实例. 73 //从当前实例赋值给graphic 74 var graphic = features[0]; 75 graphic.setSymbol(symbol); 76 77 //设置图形的infoTemplate. 78 graphic.setInfoTemplate(infoTemplate); 79 80 //添加当前这个图形到地图图层中 81 map.graphics.add(graphic); 82 } 83 //注册鼠标悬停监听事件 84 dojo.connect(map.graphics, "onMouseMove", function(evt) { 85 var g = evt.graphic; 86 map.infoWindow.setContent(g.getContent()); 87 map.infoWindow.setTitle(g.getTitle()); 88 map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor 89 (evt.screenPoint)); 90 }); 91 //注册鼠标离开监听事件 92 dojo.connect(map.graphics, "onMouseOut", function() { 93 map.infoWindow.hide(); 94 } ); 95 96 } 97 98 dojo.addOnLoad(init); 99 </script> 100 </head> 101 <body class="tundra"> 102 Click on a state to get more info. When state is highlighted, move mouse over state to get more info. 103 <div id="mapDiv" style="600px; height:600px; border:1px solid #000;"></div> 104 </body> 105 </html>