說明：使用的是ArcGIS.Server.9.3
目的：
1.ArcGIS API for JavaScript實作Toorbar功能，包括zoomin、zoomout、zoomfullext、zoomToPrevExtent、zoomToNextExtent、pan等。
準備工作：
1.在使用線上的http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer地圖資料和jsapi。
完成後的效果圖：
開始
1.啟動vs建立名為MapToolbar的ASP.NET Web應用程式。其實jsapi是純用戶端的開發了不需要vs也不需要.net了，純html頁面就可以了用記事本都可以開發了。我這裡為了友善了就用vs2008了，畢竟可以調試js腳本了。
2.然後在Default.aspx頁面裡添加對js庫和css檔案的引用了，這裡的引用位址指向線上的jsapi服務了，包括css和js兩部分的引用，具體的說明和代碼如下：
<linkrel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.1/js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.1"></script>
3.接着在工程中添加名為javascript的檔案夾并且在這個檔案夾裡建立mapApp.js的檔案，這裡用來編寫我們自己的js代碼了，在頁面裡添加對這個js檔案的引用，同時在Default.aspx頁面裡添加一個id為map的div标簽作為地圖控件的載體，同時在添加7個小圖并且讓小圖漂浮在map的div之上用來作為toolbar的功能按鈕，在map空的4個邊以及4個頂點添加8個小圖檔用來作為地圖8個方向的移動按鈕，添加完成後的html代碼如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MapToolbar._Default"%>
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<linkrel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.1/js/dojo/dijit/themes/tundra/tundra.css">
<scripttype="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.1"></script>
<scripttype="text/javascript" src="javascript/MapApp.js"></script>
<styletype="text/css">
<!--
.mapbtn {
border: 1px solid #666666;
background-color: #FFFFFF;
}
-->
</style>
</head>
<body class="tundra">
<formid="form1" runat="server"><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/ul.png" width="15" height="15" onclick="map.panUpperLeft()"/></td>
<td align="center"><img src="images/u.png" width="15" height="15" onclick="map.panUp()"/></td>
<td><img src="images/ur.png" width="15" height="15" onclick="map.panUpperRight()"/></td>
</tr>
<tr>
<td><img src="images/l.png" width="15" height="15" onclick="map.panLeft()"/></td>
<td>
<div id="map" style="width:600px; height:512px; border:1pxsolid #000;"></div>
<img style="Z-INDEX: 151; LEFT: 292px; CURSOR: hand; POSITION: absolute;TOP: 57px; right: 642px;"
alt="" src="images/nav_zoomin.png" name="zoomin" id="zoomin" class="mapbtn"
onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);">
<img style="Z-INDEX: 151; LEFT: 330px; CURSOR: hand; POSITION: absolute;TOP: 57px"
alt="" src="images/nav_zoomout.png" name="zoomout" id="zoomout"
class="mapbtn"
onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);">
<img style="Z-INDEX: 151; LEFT: 368px; CURSOR: hand; POSITION: absolute;TOP: 57px"
alt="" src="images/nav_fullextent.png" name="zoomfullext" id="zoomfullext"
class="mapbtn" onClick="navToolbar.zoomToFullExtent();">
<img style="Z-INDEX: 151; LEFT: 412px; CURSOR: hand; POSITION: absolute;TOP: 56px"
alt="" src="images/d-nav_previous.png" name="zoomprev" id="zoomprev"
class="mapbtn" onClick="navToolbar.zoomToPrevExtent();">
<img style="Z-INDEX: 151; LEFT: 458px; CURSOR: hand; POSITION: absolute;TOP: 55px"
alt="" src="images/d-nav_next.png" name="zoomnext" id="zoomnext" class="mapbtn"
onClick="navToolbar.zoomToNextExtent();">
<img style="Z-INDEX: 151; LEFT: 502px; CURSOR: hand; POSITION: absolute;TOP: 55px"
alt="" src="images/nav_pan.png" name="pan" id="pan" class="mapbtn"
onClick="navToolbar.activate(esri.toolbars.Navigation.PAN);">
<img style="Z-INDEX: 151; LEFT: 544px; CURSOR: hand; POSITION: absolute;TOP: 55px; right: 390px;"
alt="" src="images/nav_decline.png" name="deactivate" id="deactivate"
class="mapbtn" onClick="navToolbar.deactivate()"> </td>
<td><img src="images/r.png" width="15" height="15" onclick="map.panRight()"/></td>
</tr>
<tr>
<td><img src="images/dl.png" width="15" height="15" onclick="map.panLowerLeft()"/></td>
<td align="center"><img src="images/d.png" width="15" height="15" onclick="map.panDown()"/></td>
<td><img src="images/dr.png" width="15" height="15" onclick="map.panLowerRight()"/></td>
</tr>
</table>
</form>
</body>
</html>
4.上面的html中使圖檔漂浮在map上面是通過樣式實作的，map上的7個圖檔按鈕都有這樣的樣式設定：style="Z-INDEX: 151; LEFT: 292px; CURSOR: hand;POSITION: absolute; TOP: 57px; right: 642px;"這樣就能讓圖檔按鈕漂浮在map控件上了。
5.還有上面的7個功能按鈕以及8個方向的移動按鈕都添加的onclick事件了，這些事件就是調用esri.toolbars.Navigation控件的方法或esri.Map控件的方法實作的，具體的看代碼了。
6.完成頁面後切換到wabapp.js檔案開始編寫js的功能代碼，這裡的js代碼要完成載入地圖進行顯示的功能和地圖前一視圖後一視圖的功能按鈕的狀态控制了，具體的看如下代碼：
dojo.require("esri.map");
dojo.require("esri.toolbars.navigation");
var map, navToolbar;
function init()
{
map = new esri.Map("map");
map.addLayer(newesri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));
navToolbar = new esri.toolbars.Navigation(map);
dojo.connect(navToolbar,"onExtentHistoryChange", extentHistoryChangeHandler);
}
//當地圖視圖發生變化時後判定前一視圖和後一視圖的狀态
function extentHistoryChangeHandler()
{
if(!navToolbar.isFirstExtent())
{
dojo.byId("zoomprev").disabled=false;
dojo.byId("zoomprev").src="images/nav_previous.png";
}
else
{
dojo.byId("zoomprev").disabled=true;
dojo.byId("zoomprev").src="images/d-nav_previous.png";
}
if(!navToolbar.isLastExtent())
{
dojo.byId("zoomnext").disabled=false;
dojo.byId("zoomnext").src="images/nav_next.png";
}
else
{
dojo.byId("zoomnext").disabled=true;
dojo.byId("zoomnext").src="images/d-nav_next.png";
}
}
dojo.addOnLoad(init);
7.這樣很簡單的就實作了toolbar的一系列功能按鈕。
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)