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;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