這個示例報告了用戶在地圖上懸停和拖拽鼠標的鼠標指針坐標。通過事件監聽器來更新鼠標移到的x和y坐標。
下行代碼創建了地圖：
var map = new esri.Map("map");
上面行中"Map"出現了三次。第一次(var map)是對象的名稱，第二次 (esri.Map)是類的名稱,第三次("map")是將包含地圖的DIV的名稱。
這個示例加入一個ArcGISTiledMapServiceLayer到底圖，表示一個 cachedArcGIS Server地圖服務，但是也可以使用 ArcGISDynamicMapServiceLayer。這種方式接收的地圖的范圍是相同的。
注意切片地圖服務層的構造函數需要服務的REST端點的URL(http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer)。可以使用 Services Directory找到地圖服務的URL。
這兩行代碼增加了事件監聽器到地圖。一個監聽器為了 onMouseMove，另外一個為了 onMouseDrag，但是他們都是調用函數showCoordinates:
dojo.connect(map, "onMouseMove", showCoordinates);
dojo.connect(map, "onMouseDrag", showCoordinates);
這些事件都傳遞地圖點坐標到showCoordinates函數。下列代碼是函數如何獲得坐標並寫到"info"標簽：
var mp = evt.mapPoint;
dojo.byId("info").innerHTML = mp.x + ", " + mp.y;
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>Create Map Display Mouse Coordinate</title> 8 <link rel="stylesheet" type="text/css" href="styles.css" 9 href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/theme/tundra/tundra.css"> 10 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script> 11 <script type="text/javascript"> 12 dojo.require("esri.map"); 13 function init(){ 14 var map = new esri.Map("map"); 15 dojo.connect(map,"onLoad",function(){ 16 //地圖加載后，監聽到鼠標移動或拖動事件 17 dojo.connect(map,"onMouseMove",showCoordinates); 18 dojo.connect(map,"onMouseDrag",showCoordinates); 19 }); 20 21 var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer( 22 "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer" 23 ); 24 map.addLayer(tiledMapServiceLayer); 25 } 26 //顯示坐標的回調函數，參數是evt 27 function showCoordinates(evt){ 28 //從事件中獲取mapPoint 29 var mp = evt.mapPoint; 30 //顯示鼠標坐標 31 dojo.byId("info").innerHTML = mp.x + "," + mp.y; 32 } 33 34 dojo.addOnLoad(init); 35 </script> 36 </head> 37 38 <body class="tundra"> 39 <div id="map" style="position:relative;width:900px;height:600px;border:1px solid #000;"> 40 <span id="info" style="position:absolute;right:25px;bottom:5px;color:#000;z-index:50;"></span> 41 </div> 42 </body> 43 </html>