程序喵（1）内部比例尺
此示例演示如何添加一个比例尺地图。可以被添加到在地图上，或在一个用户指定的位置的比例尺。下面的代码片段显示了默认的比例尺显示在地图的左下角。
var scalebar=new esri.dijit.Scalebar({
map: map
});您可以修改该位置的地图由中设置attachTo选项之一以下值"top-right","bottom-right","top-center","bottom-center","bottom-left","top-left".
var scalebar=new esri.dijit.Scalebar({
map:map,
attachTo:"bottom-left"
});引用联接：http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/widget_scalebar
在线演示：http://help.arcgis.com/en/webapi/javascript/arcgis/samples/widget_scalebar/index.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>Map with scalebar</title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{padding:0;}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
<script>
dojo.require("dojo.parser");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.dijit.Scalebar");
var map;
function init() {
map = new esri.Map("map", {
basemap: "topo",
center: [-116.093, 34.218],
zoom: 7
});
dojo.connect(map, "onLoad", function(theMap) {
var scalebar = new esri.dijit.Scalebar({
map: map, // 必须的
scalebarUnit: "english" // 指定比例尺单位,有效值是"english" or "metric".默认"english"
});
});
}
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="overflow:hidden;">
</div>
</div>
</body>
</html>效果如下：
（2）比例尺在外部
参考联接：http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/widget_scalebarext
在线演示：http://help.arcgis.com/en/webapi/javascript/arcgis/samples/widget_scalebarExt/index.html
此示例演示如何显示一个比例尺的地图之外，在指定的位置。下面的代码片段创建了一个新的比例尺，并把它的比例尺的构造函数中指定的在div。
var scalebar=new esri.dijit.Scalebar({
map: map,
scalebarUnit:"metric"
}, dojo.byId("scalebar"));代码如下：
<!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>Scalebar</title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
<script>
dojo.require("dojo.parser");
dojo.require("esri.dijit.Scalebar");
dojo.require("esri.map");
var map;
function initialize() {
map = new esri.Map("map", {
basemap: "topo",
center: [-116.093, 34.218],
zoom: 7
});
dojo.connect(map, "onLoad", function() {
var scalebar = new esri.dijit.Scalebar({
map: map,
scalebarUnit: "english"
}, dojo.byId("scalebar"));
});
}
dojo.ready(initialize);
</script>
</head>
<body class="claro">
<div id="map" style="position: relative; width: 900px; height: 500px; border: 1px solid #000;"></div>
<div id="scalebar" style="position:absolute;left:100px;top:530px;"></div>
</body>
</html>效果如图：
（3）问题：
不知道什么原因，很多示例中都是第一次加载没问题，刷新页面时候不会再显示，比如这个比例尺也是一样，我用的是IE9浏览器
未经允许请勿转载：程序喵 » ArcGIS For JavaScript APi Map with scalebar —— 地图比例尺