描述
這個示例使用Map.extent property屬性接收地圖范圍的左下角和右上角坐標 "書簽"。
使用下列行創建地圖:
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。
下行代碼為地圖的showExtent事件增加了一個事件監聽器：
dojo.connect(map, "onExtentChange", showExtent);
這意味着如果地圖的范圍被修改，回調函數showExtent將被調用。showExtent函數構建一個包含地圖的兩個角的坐標的字符串。
Lower left corner = (extent.xmin, extent.ymin)
Upper right corner = (extent.xmax, extent.ymax)
這兩個角是需要知道用於地圖的邊界框的。showExtent函數的最后一行通過增加完整的字符串到'info' DIV在頁面上顯示坐標:
dojo.byId("info").innerHTML = s;
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</title> 8 <link rel="stylesheet" type="text/css" href="styles.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"> 12 dojo.require("esri.map"); 13 function init(){ 14 var map = new esri.Map("map");//1對象名，2類名，3div的id名 15 var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer( 16 "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer" 17 ); 18 map.addLayer(tiledMapServiceLayer); 19 //添加一個事件監聽器的地圖onExtentChange事件，地圖范圍一旦改變，回調函數showExtent就被調用 20 dojo.connect(map,"onExtentChange",showExtent); 21 } 22 //showExtent函數建立一個字符串，包含兩個角落的地圖坐標，這兩個角來確定地圖的邊界矩形 23 //Lower left corner = (extent.xmin, extent.ymin) 24 //Upper right corner = (extent.xmax, extent.ymax) 25 function showExtent(extent){ 26 var s = ""; 27 s = "XMin: "+ extent.xmin + " " 28 +"YMin: " + extent.ymin + " " 29 +"XMax: " + extent.xmax + " " 30 +"YMax: " + extent.ymax; 31 //showExtent函數的最后一行顯示在頁面上添加完成字符串的“info”DIV坐標 32 dojo.byId("info").innerHTML = s; 33 } 34 dojo.addOnLoad(init); 35 </script> 36 </head> 37 38 <body class="tundra"> 39 <div id="map" style="width:900px;height:600px;border:1px solid #000"></div> 40 <div id="info" style="padding:5px;margin:5px;background-color:#eee;"></div> 41 Creates a map and adds an ArcGISTiledMapServiceLayer. On map onExtentChanged event you should see the extent printed below the map.<br /> 42 Map navigation using mouse: 43 <ul> 44 <li>Drag to pan</li> 45 <li>SHIFT + Click to recenter</li> 46 <li>SHIFT + Drag to zoom in</li> 47 <li>SHIFT + CTRL + Drag to zoom out</li> 48 <li>Mouse Scroll Forward to zoom in</li> 49 <li>Mouse Scroll Backward to zoom out</li> 50 <li>Use Arrow keys to pan</li> 51 <li>+ key to zoom in a level</li> 52 <li>- key to zoom out a level</li> 53 <li>Double Click to Center and Zoom in</li> 54 </ul> 55 </body> 56 </html>