ArcGIS api for javascript——显示一个信息窗口
描述
这个示例展示了在用户单击地图时如何在 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
