说明：本篇博文地图充满div，上一篇博文是充满整个body

运行效果：

2、HTML代码

<!DOCTYPE html>

<html>

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <title>Scalebar应用</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; }

      #map{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 type="text/Javascript">

    var MyMap;

    var MyTiledMapServiceLayer;

    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", // 指定的地图底图.有效选项:"streets","satellite","hybrid","topo","gray","oceans","national-geographic","osm".

            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 style="width:700px;height:600px;">

    <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>

          </div>

  </body>

</html>

其中代码

     map = new esri.Map("map", {

            basemap: "topo", // 指定的地图底图.有效选项:"streets","satellite","hybrid","topo","gray","oceans","national-geographic","osm".

            center: [-116.093, 34.218],

            zoom: 7

        });
也可以改写为如下形式：

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);

注意：直接拷贝代码的时候 要把引用文件的

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

ArcGIS Scalebar 比例尺 充满div的更多相关文章

  1. ArcGIS Scalebar 比例尺

    说明.这篇博文的示例代码 地图充满body arcgis api for javascript iis怎么离线部署 请参考我前面的博文 1.运行效果 3.HTML代码 <!DOCTYPE htm ...

  2. css背景图片充满DIV

    最近接手前端页面,让给调样式.哥纯粹一个代码程序猿,表示那些个样式应该让前端人员或者美工小妹妹来实现. 书归正传,碰到了问题,页面要在手机上展现,众所周知,手机在中国的牌子很多,很难做到统一. 页面上 ...

  3. Arcgis Javascript API 开发笔记

    JS API3.4的要求 à(1)  IE9或以上版本 否则dijit1.8.3不匹配 1.如何发布ArcgisJavascript API应用 0.准备工作: (1).有web应用: (2).有js ...

  4. JS监听div的resize事件

    原文地址:http://zhangyiheng.com/blog/articles/div_resize.html 需求 开发过程中经常遇到的一个问题就是如何监听一个div的size变化. 比如我用c ...

  5. ArcGIS API for JS4.7加载FeatureLayer，点击弹出信息并高亮显示

    我加载的是ArcGIS Server本地发布的FeatureService,ArcGIS API for JS4.7记载FeatureLayer时,在二维需要通过代码启用WebGL渲染,在三维模式下, ...

  6. css background-size与背景图片填满div

    background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有 ...

  7. resize监听div的size变化

    具体实现分两类, ie9-10 默认支持div的resize事件,可以直接通过div.attachEvent('onresize', handler);的方式实现 其它浏览器 通过在div中添加一个内 ...

  8. Openlayers3 WebGis二次开发包实例

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs& ...

  9. WebGis二次开发包实例

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs& ...

随机推荐

  1. 前端打包利器：webpack工具

    一.什么是WebPack,为什么要使用它? 1.为什要使用WebPack 现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包.为了简化开发的复杂度,前端 ...

  2. 机器学习算法实践：决策树 (Decision Tree)（转载）

    前言 最近打算系统学习下机器学习的基础算法,避免眼高手低,决定把常用的机器学习基础算法都实现一遍以便加深印象.本文为这系列博客的第一篇,关于决策树(Decision Tree)的算法实现,文中我将对决 ...

  3. linux：ping不通www.baidu.com

    如果某台Linux服务器ping不通域名, 如下提示: [root@localhost ~]# ping www.baidu.com ping: unknown host www.baidu.com ...

  4. 【Android工具类】怎样保证Android与server的DES加密保持一致

    转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992 在我们的应用程序涉及到比較敏感的数据的时候,我们一般会对数据进行简单的加密.在与server之间的数据交互中 ...

  5. react-native ListView 封装 实现 下拉刷新/上拉加载更多

    1.PageListView 组件封装 src/components/PageListView/index.js /** * 上拉刷新/下拉加载更多 组件 */ import React, { Com ...

  6. (CF#257)A. Jzzhu and Children

    There are n children in Jzzhu's school. Jzzhu is going to give some candies to them. Let's number al ...

  7. MySQL性能优化的最佳20+条经验(转)

    今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我们程序 员需要去关注的事情.当我们去设计数据库表结构,对操作数 ...

  8. DNS原理及其解析过程【精彩剖析】

    DNS原理及其解析过程[精彩剖析] 2012-03-21 17:23:10 标签:dig wireshark bind nslookup dns 原创作品,允许转载,转载时请务必以超链接形式标明文章 ...

  9. JavaWeb Cookie详解

    代码地址如下:http://www.demodashi.com/demo/12713.html Cookie的由来 首先我们需要介绍一下,在Web开发过程中为什么会引入Cookie.我们知道Http协 ...

  10. Git合并分支命令参数详解：git merge --ff

    今天研究了一下git merge命令常用参数,并分别用简单的例子实验了一下,整理如下: 输入命令git merge -h可以查看相关参数: --ff  快速合并,这个是默认的参数.如果合并过程出现冲突 ...