描述
這個示例展示了在用戶單擊地圖時如何在 InfoWindow中顯示信息。信息窗口是一個dijit (Dojo widget).信息窗口能夠包含文本，字符，圖片和任何通過HTML表示的事物。這個例子在信息窗口中顯示地圖和鼠標單擊的屏幕坐標。
注意一旦地圖被創建，信息窗口屬性立即可用。例如，這行代碼明確地設置信息窗口的大小：
map.infoWindow.resize(195, 75);
能夠選擇顯示信息窗口的操作類型。在本例中，地圖單擊顯示信息窗口。為onClick事件增加監聽器:
dojo.connect(map, "onClick", addPoint);
每當地圖被單擊，上面的代碼行調用addPoint函數。該函數用setTitle 和 setContent方法來指定顯示在窗口中的內容。注意傳入addPoint函數的evt參數包含地圖和屏幕坐標。這是很重要的因為信息窗口需要在屏幕坐標上定位。因此用來顯示信息窗口的代碼行傳遞evt.screenPoint：
map.infoWindow.show(evt.screenPoint);
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//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>ArcGIS Online tiled maps.</title> 8 9 <link rel="stylesheet" type="text/css" href="styles.css" 10 href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css"> 11 <link rel="stylesheet" type="text/css" href="styles.css" 12 href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/soria/soria.css"> 13 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script> 14 <style type="text/css"> 15 #pic{ 16 max-width:100px; 17 max-height:100px; 18 } 19 .infowindow .window .top .right .user .titlebar .title{ 20 font-family: Arial,Helvetica,sans-serif; 21 font-weight: bold; 22 font-size: 14pt; 23 } 24 .infowindow .window .top .right .user.content{ 25 font-style: italic; 26 font-size: 10pt; 27 } 28 29 </style> 30 31 <script type="text/javascript"> 32 dojo.require("esri.map"); 33 var map; 34 function init(){ 35 36 37 map=new esri.Map("map"); 38 dojo.connect(map,"onLoad",function(map){//第一個或基礎圖層被成功添加到地圖時觸發事件。 39 map.infoWindow.resize(250,200);//設置窗口大小 40 }); 41 42 var tiledMapServiceLayer=new esri.layers.ArcGISTiledMapServiceLayer( 43 "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer" 44 ); 45 map.addLayer(tiledMapServiceLayer); 46 dojo.connect(map,"onClick",addPoint); 47 48 49 } 50 function addPoint(event){ 51 map.infoWindow.setTitle("Coordinates(坐標)"); 52 map.infoWindow.setContent("lat/lon:"+event.mapPoint.y+","+event.mapPoint.x+ 53 "<br/>screen x/y :"+event.screenPoint.x+","+event.screenPoint.y+"</br>"+"<img id='pic' src='images/ld.gif'/>"); 54 map.infoWindow.show(event.screenPoint,map.getInfoWindowAnchor(event.screenPoint)); 55 } 56 57 58 dojo.addOnLoad(init); 59 </script> 60 </head> 61 62 <body class="tundra"> 63 <table> 64 <tr> 65 <td> 66 <div id="map" class="soria" style="position:relative;width:900px;height:600px;border:1px solid #000"> 67 <span id="scale" style="position:absolute;right:10px;bottom:10px;z-index:100;color:white"></span> 68 </div> 69 </td> 70 </tr> 71 </table> 72 </body> 73 </html> 74 75 76