一、說明
引用文件那塊，可以參考我上一篇博文，arcgis api for javascript離線部署。
這篇博文中，地圖占滿整個body
二、運行效果
三、HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Overview Map</title>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js3_api/library/3.3/jsapi/js/dojo/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js3_api/library/3.3/jsapi/js/esri/css/esri.css" />
<style> html, body { height:100%; width: 100%; margin: 0; padding: 0; }
</style>
<script>
var dojoConfig = { parseOnLoad: true }; </script>
<script type="text/Javascript" src="http://localhost/arcgis_js3_api/library/3.3/jsapi/init.js"></script>
<script>
// 導入必要包
dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.map"); dojo.require("esri.dijit.OverviewMap"); var map; function init() { map = new esri.Map("map", { center: [-122.445, 37.752], zoom: 4 }); MyTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer ("http://localhost/arcgis/rest/services/DZDT2012/MapServer"); map.addLayer(MyTiledMapServiceLayer); dojo.connect(map, "onLoad", function (theMap) { // 添加概覽地圖
var overviewMapDijit = new esri.dijit.OverviewMap({ map: map, // 必要的
visible: true, // 初始化可見,默認為false
attachTo: "bottom-right", // 默認右上角
width: 150, // 默認值是地圖高度的 1/4th
height: 150, // 默認值是地圖高度的 1/4th
opacity: .40, // 透明度 默認0.5
maximizeButton: true, // 最大化,最小化按鈕,默認false
expandFactor: 3, //概覽地圖和總覽圖上顯示的程度矩形的大小之間的比例。默認值是2,這意味着概覽地圖將至少是兩倍的大小的程度矩形。
color: "red" // 默認顏色為#000000
}); overviewMapDijit.startup(); // 開啟
}); } dojo.ready(init); </script>
</head>
<body class="claro">
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width: 100%; height: 100%; margin:0;">
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="padding:0">
</div>
</div>
</body>
</html>
注釋：這篇文章中，地圖我用的是我本機的("http://localhost/arcgis/rest/services/DZDT2012/MapServer");
如果你沒有自己的地圖可以使用下面的HTML代碼
四、HTML（另外一種形式）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Overview Map</title>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js3_api/library/3.3/jsapi/js/dojo/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js3_api/library/3.3/jsapi/js/esri/css/esri.css" />
<style> html, body { height:100%; width: 100%; margin: 0; padding: 0; }
</style>
<script>
var dojoConfig = { parseOnLoad: true }; </script>
<script type="text/Javascript" src="http://localhost/arcgis_js3_api/library/3.3/jsapi/init.js"></script>
<script>
// 導入必要包
dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.map"); dojo.require("esri.dijit.OverviewMap"); var map; function init() { map = new esri.Map("map", { basemap: "topo", // 指定的地圖底圖.有效選項:"streets","satellite","hybrid","topo","gray","oceans","national-geographic","osm".
center: [-122.445, 37.752], // 居中的經緯度
zoom: 14 // 縮放深度級別
}); dojo.connect(map, "onLoad", function (theMap) { // 添加概覽地圖
var overviewMapDijit = new esri.dijit.OverviewMap({ map: map, // 必要的
visible: true, // 初始化可見,默認為false
attachTo: "bottom-right", // 默認右上角
width: 150, // 默認值是地圖高度的 1/4th
height: 150, // 默認值是地圖高度的 1/4th
opacity: .40, // 透明度 默認0.5
maximizeButton: true, // 最大化,最小化按鈕,默認false
expandFactor: 3, //概覽地圖和總覽圖上顯示的程度矩形的大小之間的比例。默認值是2,這意味着概覽地圖將至少是兩倍的大小的程度矩形。
color: "red" // 默認顏色為#000000
}); overviewMapDijit.startup(); // 開啟
}); } dojo.ready(init); </script>
</head>
<body class="claro">
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width: 100%; height: 100%; margin:0;">
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="padding:0">
</div>
</div>
</body>
</html>
注意：直接拷貝代碼的時候 要把引用文件的
arcgis_js3_api修改為
arcgis_js_api
例如：
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js3_api/library/3.3/jsapi/js/dojo/dijit/themes/claro/claro.css"/>修改為
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.3/jsapi/js/dojo/dijit/themes/claro/claro.css"/>
因為我本機IIS文件夾名稱是
arcgis_js3_api