# 高德地图开发文档

## 一、快速使用步骤

### 1.在页面中引入高德地图JavaScript API入口脚本

```javascript
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=您申请的key值"></script>
```

### 2.创建地图容器

&#x20;在页面body里你想展示地图的地方创建一个div 容器，并指定id标识:

```markup
<div id="container"></div>  
```

### 3.给地图容器指定大小

&#x20;可以使用CSS为地图容器设置合适的大小，比如:

```css
<style>
  #container {width:300px; height: 180px; }  
</style>
```

### 4.创建地图

&#x20;如上准备工作完成之后，就可以开始创建地图了。生成一副简单地图只需要一句代码，将我们刚刚创建的div的id传给Map的构造函数即可， 这个时候API将根据用户所在的城市自动进行地图中心点和级别的设定：

```javascript
<script type="text/javascript">
  var map = new AMap.Map('container');
</script>
```

&#x20;此时打开html页面，就可以看到一张高德地图展现在你的html页面中

## 二、进阶1

### 5.设定地图的中心点和级别

```
zoom -> 级别
center -> 中心点
```

&#x20;我们一般需要给地图按需设定中心点和坐标等属性，这里可以通过两种方式，第一种，直接在地图初始化的时候传入相关属性，center属性 的值可以是经纬度的二元数组，也可以是AMap.LngLat对象，要求经度值在前，纬度值在后：

```javascript
<script type="text/javascript">
    var map = new AMap.Map('container',{
        zoom: 10,
        center: [116.39,39.9]// center: new AMap.LngLat(116.39,39.9)
    });
</script>
```

&#x20;也可以在地图初始化过后，任何需要的地方通过方法来改变地图的中心点和级别

```javascript
<script type="text/javascript">
  var map = new AMap.Map('container');
  map.setZoom(10);
  map.setCenter([116.39,39.9]);
</script>
```

### 6.覆盖物

&#x20;JavaScript API提供了丰富的覆盖物，比如Marker点标记、Polyline折线、Polygon多边形、Circle圆等。\
以Marker为例， 我们创建一个最简单的Marker，并将它添加到地图上：

```
var marker = new AMap.Marker({
  position: [116.480983, 39.989628],//marker所在的位置
  map:map//创建时直接赋予map属性
});
```

&#x20;也可以在创建完成后通过setMap方法执行地图对象

```
var marker = new AMap.Marker({
  position: [116.480983, 39.989628],//marker所在的位置
});

marker.setMap(map);
```