地图书签的功能字面理解就是暂时记录当前地图的范围和放大级别，在后续操作中如果想回到地图之前的状态，可以点击当时创建的书签来回到此状态，如下图所示：
地图刚加载完成时是一副以成都为中心的地图，放大级别是10：
我们将地图的中心拖动到南京，进一步放大地图，然后创建以“南京”为名称的书签，如图：
创建好书签之后我们将地图随意拖动和放大，然后点击刚才创建的“南京”这个书签，地图中心和放大级别顿时切换回了创建南京这个书签时的状态，如图：
下面讲解一下实现的主要代码：
首先是创建一个基本地图，实例请参考第一篇文章《创建地图》，然后接下来的步骤和地图添加控件的步骤基本一致，因为书签功能也是一个控件。
创建存放书签功能的容器：
<body class="calcite">
<div id="map"></div>
<div class="bookmark-container">
<div id="bookmarks"></div>
</div>
</body>细心地同学已经注意到，这次添加了两个div，他们是嵌套的关系，这是因为我们的书签控件由两部分组成，一部分是外面的书签面板，另一部分是面板内的创建书签的控件。接下来设置书签面板的样式：
.bookmark-container {
position: absolute;
top: 100px;
left: 15px;
padding: 1rem;
background: #ffffff;
border-radius: 4px;
border: 1px solid #eeeeee;
}在此处同样也是没有设置id为“bookmarks”的容器的样式，这是因为此div的样式已经在esri.css文件中设置过，所以我们默认不设置就好。
接下来我们引入“esri/dijit/Bookmarks”模块来创建书签控件，实例化一个书签，如下：
var bookmarks = new Bookmarks({
map: map,
editable: true
}, "bookmarks");至此，一个书签控件已经添加到地图上，完整的代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Bookmark Widget</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/themes/calcite/esri/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
.bookmark-container {
position: absolute;
top: 100px;
left: 15px;
padding: 1rem;
background: #ffffff;
border-radius: 4px;
border: 1px solid #eeeeee;
}
</style>
<script src="https://js.arcgis.com/3.25/"></script>
<script>
require([
"esri/map",
"esri/dijit/Bookmarks",
"dojo/domReady!"
],
function (Map, Bookmarks){
var map = new Map("map", {
basemap: "osm",
center: [104.072259,30.663527],
zoom: 10
});
//创建地图书签控件
var bookmarks = new Bookmarks({
map: map,
editable: true
}, "bookmarks");
});
</script>
</head>
<body class="calcite">
<div id="map"></div>
<div class="bookmark-container">
<div id="bookmarks"></div>
</div>
</body>
</html>