03 创建地图
在此示例中我们通过引入“esri/map”接口来创建一个简单的地图，其中地图中心为成都市，放大级别是10级，地图默认开启鼠标滚动实现放大和缩小以及漫游功能，示例图如下：
具体操作过程如下：
1 在创建地图之前我们首先要搭建一个基本的web页面，也就是html页面，这里所需的基础知识分别是HTML、CSS、JavaScript三大前端基础知识，如果对以上知识不清楚，可以到W3C网站进行学习，网址“http://www.w3school.com.cn/html/”，此网站内容简洁易懂，适合初学者。
搭建web页面代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>以上代码是一个web页面的最基本格式，第一行是html页面固有的格式，表示此文件是一个HTML页面，接下来的结构分两大部分构成，第一部分是<head>标签，第二部分是<body>标签。
我们可以修改<title>标签内的文字来确定页面的标题，后续步骤中，我们的样式文件引入或者书写是在<head>标签内完成，页面控件的添加和相关js文件的引入是在<body>标签内完成。
2 引入创建地图所需的样式文件以及实现鼠标操作功能的js文件：
<link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">
<script src="https://js.arcgis.com/3.25/"></script>在以上代码中除了引入CSS文件和JS文件之外，发现<meta>标签内容发生了变化，其实<meta>标签主要是当前页面的一个说明作用，我们可以忽略它，使用刚创建时的内容；除此之外，在此示例中引用的文件全部使用了在线方式，并没有使用离线配置的文件，这个看大家喜好来决定，离线配置的速度比较快，但是在网速能保证的情况下两者差别不是很大。
3 接下来是比较重要的两步，第一是要创建一个地图展示的容器，也就是HTML中的<div>标签；第二是添加样式代码和逻辑控制代码，也就是css代码和js代码。
我们在<body>标签内添加<div>标签，用它来展示地图，换句话说，地图创建好之后是放在这个<div>内的，我们给此div添加一个id属性，因为js逻辑代码创建地图时需要知道地图创建在哪。
<div id="map"></div>注意div添加的位置是在body和script标签之间，以后我们添加控件时，空间必须要添加在<script>标签之前，因为HTML页面是自上而下解析的，所以将控件代码在逻辑代码之前添加是为了加快浏览器渲染速度，避免出现页面加载时的白屏现象。
添加完容器之后就是添加逻辑代码：
<script>
var map;
require(["esri/map", "dojo/domReady!"], function(Map) { //引入所需模块
map = new Map("map", { //创建地图
basemap: "osm", //添加底图
center: [104.072259,30.663527], // 设置地图加载时的中心
zoom: 10 //设置地图初始的放大级别
});
});
</script>逻辑代码写在<script>标签内，此处的<script>标签要放置在加载初始化地图的逻辑代码后面。在以上代码中，我们首先声明一个变量，然后通过require来加载所需的模块，此处需要“esri/map”模块，接下来通过Map()来实例化一个map对象，在实例化过程中，我们可以指定一系列功能，比如地图中心、是否开启漫游、放大级别等。
逻辑代码书写完毕后我们要设置容器的大小和位置，我们之前引入的样式文件只是esri提供的地图渲染的一些基本的CSS样式，此处我们设置的样式是控件的样式。
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>以上的样式代码设置了整个html以及body和id为map的div容器的样式，将三者的样式设置为同样的，高度是100%，内外边距都是0，我们也可以进行相应的修改，来实现地图显示在屏幕的不同位置和显示不同的大小。
至此，一个简单地图创建完成，完整代码如下：
<!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"/>
<title>Simple Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.25/"></script>
<script>
var map;
require(["esri/map", "dojo/domReady!"], function(Map) {
map = new Map("map", {
basemap: "osm", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [104.072259,30.663527], // longitude, latitude
zoom: 10
});
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>附：在实际的工作中或者学习中仅仅创建一副简单的地图很显然不能满足实际的需求，我们肯定会根据实际的需求来创建自己的地图，并且进行相关的操作，对于地图的属性和相关操作，可以查看此地址来详细的学习相关的属性和功能“https://developers.arcgis.com/javascript/3/jsapi/map-amd.html”。
