Html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"></link>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript">
</script>
<title>MenuBar</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
<script src="http://js.arcgis.com/3.12/"></script>
</head>
<body class="claro" expr:class='"loading" + data:blog.mobileClass' onload='prettyPrint();'>
<!-- MenuBar div#navMenu -->
<div data-dojo-type="dijit/MenuBar" id="navMenu">
<div data-dojo-type="dijit/PopupMenuBarItem">
<span>地圖</span>
<div data-dojo-type="dijit/DropDownMenu" id="mapMenu">
<div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){alert('地圖操作')}">地圖操作</div>
</div>
</div>
</div>
<!-- MenuBar div#navMenu -->
<div id="mapDiv"></div>
</body>
</html>
說明:
1. 引用 CSS:claro.css、esri.css 引用參考位置如下:
<link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
2. 引用 Javascript 需插入 <script src="http://js.arcgis.com/3.12/"></script> 其中已包含了Dojo框架囉
3. <body> 標籤中 加入 class 樣式定義為 "claro" 如: <body class="claro">
4. 加入 div 區塊 當作 MenuBar,如:<div data-dojo-type="dijit/MenuBar" id="navMenu"></div>
5. 加入 div 區塊 當作 PopupMenuBarItem,將該物件放在 MenuBar Div 區塊內 如:
<div data-dojo-type="dijit/PopupMenuBarItem">
</div>
給該選單名稱,則是在 PopupMenuBarItem div 區塊 內加入 <span>地圖</span> 來定義
加入 div 區塊 當作 DropDownMenu,將該物件放在 PopupMenuBarItem Div 區塊內 如:
<div data-dojo-type="dijit/DropDownMenu" id="mapMenu">
</div>
加入 div 區塊 當作 MenuItem,將該物件放在 DropDownMenu Div 區塊內 如:
<div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){alert('地圖操作')}">地圖操作</div>
6. 加入 div 區塊 當作地圖區塊,如:<div id="mapDiv"></div>
CSS:
html, body, #mapDiv {
padding: 0;
margin: 0;
height: 100%;
}
說明:
1. 定義 mapDiv 區塊的 CSS 樣式
JavaScript:
var map;
require([
"esri/map",
"dojo/parser",
// Modules referenced by the parser
"dijit/DropDownMenu",
"dijit/MenuBar",
"dijit/MenuBarItem",
"dijit/MenuItem",
"dijit/PopupMenuBarItem",
"dojo/domReady!"
], function (
Map,
parser,
DropDownMenu,
MenuBar,
MenuBarItem,
MenuItem,
PopupMenuBarItem
){
parser.parse();
map = new Map("mapDiv",
{
center: [121, 23.5],
zoom: 8,
basemap: "streets"
});
});
說明:
1. 定義 弱型別的變數 map
.require 是 Dojo 方法,利用該方法,
載入 esri/map、dojo/parser、dijit/DropDownMenu、MenuBar、MenuBarItem、MenuItem、PopupMenuBarItem、dojo/domReady!
根據 Dojo API 參考文件來說,
/ 之前的叫 The main packages of the Dojo Toolkit,
/ 之後的叫 Common modules and packages of the Dojo Toolkit,
那就叫它為「模組」
載入模組後,需用一個 變數來接收該模組,以便於操作
例如 function(Map) {} 用一個 拋棄式的函數,
裡面定義變數: Map、parser、DropDownMenu、MenuBar、MenuBarItem、MenuItem、PopupMenuBarItem,
該變數就被設成相對印的類別,
2. function(Map...略...) {} 用一個 拋棄式的函數 裡面定義 map 變數,
透過傳入的 Map 類別可以 宣告成一個 esri/map 的物件,其他載入的亦同方式
parser.parse() 主要是將 dom 轉換成 dijit 物件或是 widget
(new Map 宣告方法 就要查 https://developers.arcgis.com/javascript/jsapi/map-amd.html )