ArcGIS For JavaScript API Display map in a dialog(在会话窗口中显示地图)————（七）
描述：
此示例显示了如何显示一个地图Dojo Dialog 和TooltipDialog的部件。 TooltipDialog弹出一个窗口，看起来像一个工具提示。在此示例中，TooltipDialog你点击一个链接时，会显示。再次点击该链接，隐藏TooltipDialog。在这个片断中，我们使用dijit.popup.open打开提示对话框。
dijit.popup.open({ popup: tooltipDialog, around: node });
该示例还显示一个地图在dojo Dialog，在该片段中一个新的地图格的内容创建和设置新的dojo Dialog
dialogBox = new dijit.Dialog({
title: "My Map",
content: htmlFragment,
autofocus: !dojo.isIE,
refocus: !dojo.isIE
});
在线引用：http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm
ArcGIS For JavaScript API ：http://help.arcgis.com/en/webapi/javascript/arcgis/index.html
在线演示：http://help.arcgis.com/en/webapi/javascript/arcgis/samples/map_dialog/index.html
ojo在线帮助API：http://dojotoolkit.org/api/
代码分析：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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>Map地图</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
<style type="text/css">
a {
color: blue;
}
</style>
<script type="text/javascript">
// 导入包，及两个dojo的必要回话组件
dojo.require("esri.map");
dojo.require("dijit.Dialog");
dojo.require("dijit.TooltipDialog");
dojo.require("dijit.Tooltip");
var dialogBox, tooltipDialog; // 一个窗口回话对象，一个提示回话对象
/*********
* Dialog
*********/
function showMapInDialog() {
if (!dialogBox) {
var htmlFragment = '<div>在地图上点击.</div>';
htmlFragment += '<div id="mapOne" style="width:500px; height:400px; border: 1px solid #A8A8A8;"></div>';
// 创建会话
dialogBox = new dijit.Dialog({
title: "我的地图", // 标题
content: htmlFragment, // 内容
draggable:true, // 是否可以在标题上拖动对话框，默认：true
autofocus: !dojo.isIE, // 自动对焦，默认：true。 注意: 当焦点放在IE浏览器，重新打开回话时会导致错误
loadingMessage:"加载中...", // 加载时的文字
errorMessage:"加载失败", // 如果发生错误的消息显示，默认""
refocus: !dojo.isIE, // 重调焦距
});
// 调用show()方法，显示回话
dialogBox.show();
// 调用函数来创建第一个地图
createMap("mapOne");
} else {
dialogBox.show();
}
}
/****************
* TooltipDialog
****************/
function showMapInTooltipDialog(node) {
if (!tooltipDialog) {
var htmlFragment = '<div>在地图上点击.</div>';
htmlFragment += '<div id="mapTwo" style="width:350px; height:350px; border: 1px solid #A8A8A8;"></div>';
// 创建 ToolTip Dialog
tooltipDialog = new dijit.TooltipDialog({
content: htmlFragment, // 内容
autofocus: !dojo.isIE, // 注意: 当焦点放在IE浏览器，重新打开回话时会导致错误
refocus: !dojo.isIE
});
// 点击后，周围元素显示tooltip dialog对话框
dijit.popup.open({ // 弹出的窗口小部件
popup: tooltipDialog, // 弹出的组件
around: node // DOM节点（通常是一个按钮）
});
tooltipDialog.opened_ = true; // 是否被打开的
node.innerHTML = "隐藏"; // 重新设定文字
// 创建地图
createMap("mapTwo");
} else {
if (tooltipDialog.opened_) { // 功能复位代码
dijit.popup.close(tooltipDialog);
tooltipDialog.opened_ = false;
node.innerHTML = "在我下面显示地图";
} else {
dijit.popup.open({
popup: tooltipDialog,
around: node
});
tooltipDialog.opened_ = true;
node.innerHTML = "隐藏";
}
}
}
/**
* 创建地图函数，传入Dom节点id
*/
function createMap(srcNodeRef) {
var map = new esri.Map(
srcNodeRef, // Dom节点id
wrapAround180：true, // 如果为true，支持连续泛跨越日界线,类似与无缝滚动marquee效果
{extent: new esri.geometry.Extent( // 地图范围
-19384354.257963974, // 右上角X横坐标
-12688852.605287973, // 左下角X横坐标
19751404.224035975, // 右上角Y纵坐标
18619754.180311985, // 左下角Y纵坐标
new esri.SpatialReference({ // 空间参考
wkid: 102100
})
),
slider: false, // 是否显示滑块 默认true
nav:true // 平移箭头 默认false
}
);
// 绑定初始化加载事件
dojo.connect(map, "onLoad", function() {
dojo.connect(map, "onMouseOver", map, "reposition");
map.infoWindow.setTitle("位置"); // 设置标题
map.infoWindow.resize(200, 100); // 设置消息窗体大小
});
var markerSymbol = new esri.symbol.SimpleMarkerSymbol( // 标记符号
esri.symbol.SimpleMarkerSymbol.STYLE_X, // 样式，STYLE_CIRCLE(●)，STYLE_CROSS(+)，STYLE_DIAMOND(◆)，STYLE_SQUARE(■)，STYLE_X(X)
12, // 像素
new esri.symbol.SimpleLineSymbol( // 线符号
esri.symbol.SimpleLineSymbol.STYLE_SOLID, //样式，STYLE_DASH，STYLE_DASHDOT，STYLE_DASHDOTDOT，STYLE_DOT，STYLE_NULL，STYLE_NULL
new dojo.Color( // 颜色，0.75为透明度
[255,0,0,0.75]
),
4 // 线符号的像素
)
);
var graphic;
// 绑定单击事件
dojo.connect(map, "onClick", function(evt) {
// 在点击的位置添加图形
if (graphic) {
graphic.setGeometry(evt.mapPoint); // 定义几何图，evt.mapPoint是Geometry的子类。
} else {
graphic = new esri.Graphic( // 构建图像
evt.mapPoint, // 当前地图坐标点
markerSymbol // 标记符号
);
map.graphics.add(graphic); // 将图像加入到地图中
}
// 显示信息窗口
var content = "Latitude（纬度） = ${y} <br/> Longitude（经度） = ${x}";
map.infoWindow.setContent( // 设置内容，html或dom元素
esri.substitute( // esri.substitute(data, template?, first?)，占位符显示值方法
esri.geometry.webMercatorToGeographic(evt.mapPoint), //从web 墨卡托单位到地理单位间的几何转换
content
)
);
map.infoWindow.show( // 显示窗体
evt.screenPoint, // 屏幕坐标
map.getInfoWindowAnchor(evt.screenPoint) // getInfoWindowAnchor(screenCoords) 在屏幕单位上的定位点。
);
});
// 添加服务层
var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
map.addLayer(tiledMapServiceLayer);
return map;
}
</script>
</head>
<body class="claro" style="font-family: Arial Unicode MS,Arial,sans-serif;">
<a href="#" onclick="showMapInDialog();">在对话框中显示地图</a>
<a href="#" onclick="showMapInTooltipDialog(this);">下面的链接显示地图</a>
</body>
</html>
效果如下：
