高德地图网页端js API

注册账号并申请Key

1. 首先，注册开发者账号，成为高德开放平台开发者 https://lbs.amap.com/api/javascript-api/guide/abc/prepare

2. 登陆之后，在进入「应用管理」 页面「创建新应用」

3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

准备页面

1. 在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key；

HTML

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

2. 添加div标签作为地图容器，同时为该div指定id属性；

HTML

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

3. 为地图容器指定高度、宽度；

CSS

#container {300px; height: 180px; }

4. 进行移动端开发时，请在head内添加viewport设置，以达到最佳的绘制性能；

HTML

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

5. 在完成如上准备工作之后便可以开始进行开发工作了，查看快速入门。

异步加载 JS API

上一节说明的是最基本的同步加载 JS API 的方式，如果您需要异步加载，比如通过appendChild，或者通过require等异步方式来加载，这时需要您需要先准备一个全局的回调函数作为 JS API 异步加载的回调函数，并将其函数名作为callback参数添加在 JS API 的引用地址后面，此时要注意，回调函数应该在脚本请求发出之前进行声明。异步加载方式只有在回调之后，才能开始调用JSAPI的相关接口。比如

JavaScript

<script>
		window.onLoad = function(){
		 var map = new AMap.Map('container'); 
		} 
		var url = 'https://webapi.amap.com/maps?v=1.4.15&key=64856519773d3e62866f4f1b502841fc&callback=onLoad'; 
		var jsapi = doc.createElement('script'); jsapi.charset = 'utf-8'; 
		jsapi.src = url; document.head.appendChild(jsapi);
	</script>

　　

按照「准备」篇完成页面准备工作之后就可以真正开始地图的开发工作了。

HELLO，AMAP！

简单创建一个地图只需要一行代码，构造参数中的container为准备阶段添加的地图容器的id：

JavaScript

var map = new AMap.Map('container');

创建的同时可以给地图设置中心点、级别、显示模式、自定义样式等属性：

JavaScript

var map = new AMap.Map('container', { zoom:11,//级别 center: [116.397428, 39.90923],//中心点坐标 viewMode:'3D'//使用3D视图 });

图层

默认情况下，地图只显示标准底图，如需要叠加别的图层，可以通过map.add方法添加图层：

JavaScript

var map = new AMap.Map('container', { resizeEnable: true, center: [116.397428, 39.90923], zoom: 13 });

//实时路况图层
var trafficLayer = new AMap.TileLayer.Traffic({ zIndex: 10 }); map.add(trafficLayer);//添加图层到地图

也可以在地图初始化的时候通过layers属性为地图设置多个图层：

    var map = new AMap.Map('container', {
        center: [116.397428, 39.90923],
        layers: [//使用多个图层
            new AMap.TileLayer.Satellite(),
            new AMap.TileLayer.RoadNet()
        ],
        zooms: [4,18],//设置地图级别范围
        zoom: 13
    });

　　地图 JS API 提供了标准、卫星、路网、路况、建筑等多个官方图层，同时也提供了加载第三方WMS、WMTS、XYZ等标准图层的接口，也提供了把一般的图片、Canvas、视频、热力等作为图层的能力，

点标记与矢量图形

JS API 提供了在地图之上绘制覆盖物的能力，比如点标记 Marker、文本标记 Text、圆点标记 CircleMarker。

添加点标记的方法非常简单，比如添加一个默认样式的Marker：

   var marker = new AMap.Marker({
        position:[116.39, 39.9]//位置
    })
    map.add(marker);//添加到地图

　　移除的方法如下：map.remove(marker)

也提供了绘制圆Circle、折线 Polyline、多边形 Polygon、椭圆 Ellipse、矩形 Rectangle、贝瑟尔曲线 BesizerCurve等矢量图形的能力，比如添加折线：

var lineArr = [
        [116.368904, 39.913423],
        [116.382122, 39.901176],
        [116.387271, 39.912501],
        [116.398258, 39.904600]
    ];
    var polyline = new AMap.Polyline({
        path: lineArr,          //设置线覆盖物路径
        strokeColor: "#3366FF", //线颜色
        strokeWeight: 5,        //线宽
        strokeStyle: "solid",   //线样式
    });
    map.add(polyline);

　　

事件功能与信息窗体

JS API 提供的Map、点标记、矢量图形的实例均支持事件，鼠标或者触摸操作均会触发相应的事件。我们通过给点标记绑定click事件来简单了解事件系统和信息窗体的基本使用：

var infoWindow = new AMap.InfoWindow({ //创建信息窗体
        isCustom: true,  //使用自定义窗体
        content:'<div>信息窗体</div>', //信息窗体的内容可以是任意html片段
        offset: new AMap.Pixel(16, -45)
    });
    var onMarkerClick  =  function(e) {
        infoWindow.open(map, e.target.getPosition());//打开信息窗体
        //e.target就是被点击的Marker
    } 
    var marker = new AMap.Marker({
         position: [116.481181, 39.989792]
    })
    map.add(marker);
    marker.on('click',onMarkerClick);//绑定click事件

　　

JS API 的加载

JS API 支持多种加载方式，可以顺序加载也可以异步加载，同时也可以作为一般脚本资源被 RequireJS 等前端框架加载。

顺序同步加载

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script type="text/javascript">
    var map = new AMap.Map('container', {
       center:[117.000923,36.675807],
       zoom:11
    });
</script>

　　

异步加载

异步加载指的是为 JS API 指定加载的回调函数，在 JS API 的主体资源加载完毕之后，将自动调用该回调函数。回调函数应该声明在 JS API 入口文件引用之前，异步加载可以减少对其他脚本执行的阻塞，HTTPS 下我们也建议使用异步方式：

<script type="text/javascript">
    window.init = function(){
        var map = new AMap.Map('container', {
           center:[117.000923,36.675807],
           zoom:11
        });
    }
</script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=init"></script>

　　或者

window.onLoad  = function(){
    var map = new AMap.Map('container');
}
var url = 'https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=onLoad';
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);

　　

使用 RequireJS 等加载

在使用 RequireJS 等前端框架时，JS API 应该被当作一般脚本资源，并使用上述异步方式进行加载，比如

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
      body,html,#container{
         100%;
        height: 100%;
        margin: 0px
      }
    </style>
    <title>通过RequireJS加载</title>
  </head>
  <body>
   <div id="container" tabindex="0"></div>
   <script src="https://webapi.amap.com/js/require.js" data-main="./require-init"></script>
  </body>
</html>

　　require-init.js

require.config({
  paths: {　　　　　　
    "amap": "https://webapi.amap.com/maps?v=1.4.15&key=&callback=onAMapLoaded"　　　　
  }　　
});
window.onAMapLoaded = function() {
  require(['initAMap'], function(mapIniter) {
    mapIniter.init();
  })
}
require(['amap'])

　　nitAMap.js

define(function() {　　　　
  var init = function() {　　　　　　
    var amap = new AMap.Map('container');
  };　　　　
  return {　　　　　　
    init: init
  };　　
});

　　

插件的使用

JS API 提供了众多的插件功能，这些功能不会主动随着 JSAPI 主体资源下发，需要引入之后才能使用这些插件的功能。这些功能包括：

• 服务类，如：POI搜索 PlaceSearch、输入提示 AutoComplete、路线规划 Driving/Walker/Transfer/Riding/Truck、地理编码 Geocoder、公交线路 LineSearch、公交站点 StationSearch、天气查询 Weather等；
• 地图控件，如：缩放工具条 ToolBar、比例尺 Scale、定位按钮 Geolocation等；
• 矢量图形编辑工具，如折线/多边形编辑器 PolyEditor、圆形编辑器 CircleEditor等；
• 工具类，如鼠标绘制工具 MouseTool、测距工具 RangingTool等。

插件的使用流程

1. 引入插件，支持按需异步加载和同步加载，可同时引入多个插件，
2. 创建插件实例，非特殊情况需避免重复创建多个实例，复用同一个实例即可；
3. 调用实例的方法，使用相关功能。

插件的引入

异步加载多个插件

 AMap.plugin(['AMap.ToolBar','AMap.Driving'],function(){//异步同时加载多个插件
      var toolbar = new AMap.ToolBar();
      map.addControl(toolbar);
      var driving = new AMap.Driving();//驾车路线规划
      driving.search(/*参数*/)
  });

　　

插件列表

类名	类功能说明
AMap.ElasticMarker	灵活点标记，可以随着地图级别改变样式和大小的 Marker
AMap.ToolBar	工具条，控制地图的缩放、平移等
AMap.Scale	比例尺，显示当前地图中心的比例尺
AMap.OverView	鹰眼，显示缩略图
AMap.MapType	图层切换，用于几个常用图层切换显示
AMap.Geolocation	定位，提供了获取用户当前准确位置、所在城市的方法
AMap.AdvancedInfoWindow	高级信息窗体，整合了周边搜索、路线规划功能
AMap.Autocomplete	输入提示，提供了根据关键字获得提示信息的功能
AMap.PlaceSearch	地点搜索服务，提供了关键字搜索、周边搜索、范围内搜索等功能
AMap.PlaceSearchLayer	搜索结果图层类，将搜索结果作为图层展示
AMap.DistrictSearch	行政区查询服务，提供了根据名称关键字、citycode、adcode 来查询行政区信息的功能
AMap.LineSearch	公交路线服务，提供公交路线相关信息查询服务
AMap.StationSearch	公交站点查询服务，提供途经公交线路、站点位置等信息
AMap.Driving	驾车路线规划服务，提供按照起、终点进行驾车路线的功能
AMap.TruckDriving	货车路线规划
AMap.Transfer	公交路线规划服务，提供按照起、终点进行公交路线的功能
AMap.Walking	步行路线规划服务，提供按照起、终点进行步行路线的功能
AMap.Riding	骑行路线规划服务，提供按照起、终点进行骑行路线的功能
AMap.DragRoute	拖拽导航插件，可拖拽起终点、途经点重新进行路线规划
AMap.ArrivalRange	公交到达圈，根据起点坐标，时长计算公交出行是否可达及可达范围
AMap.Geocoder	地理编码与逆地理编码服务，提供地址与坐标间的相互转换
AMap.CitySearch	城市获取服务，获取用户所在城市信息或根据给定IP参数查询城市信息
AMap.IndoorMap	室内地图，用于在地图中显示室内地图
AMap.MouseTool	鼠标工具插件
AMap.CircleEditor	圆编辑插件
AMap.PolyEditor	折线、多边形编辑插件
AMap.MarkerClusterer	点聚合插件
AMap.RangingTool	测距插件，可以用距离或面积测量
AMap.CloudDataLayer	云图图层，用于展示云图信息
AMap.CloudDataSearch	云图搜索服务，根据关键字搜索云图点信息
AMap.Weather	天气预报插件，用于获取未来的天气信息
AMap.RoadInfoSearch	道路信息查询，已停止数据更新，反馈信息仅供参考
AMap.Hotspot	热点插件，地图热点已默认开启，不用手动添加，由Map的 isHotspot 属性替代
AMap.Heatmap	热力图插件

使用 JS API 开发之前有几个基础类型需要了解一下，包括：

1. 经纬度 AMap.LngLat
2. 像素点 AMap.Pixel
3. 像素尺寸 AMap.Size
4. 经纬度矩形边界 AMap.Bounds
5. 经纬度路径边界 AMap.ArrayBounds

经纬度 AMap.LngLat

格式

经纬度的有效范围为经度-180度到+180度，纬度大约-85度到+85度。

JS API 支持的经纬度的写法有两种，使用时经度在前，纬度在后，推荐使用标准写法：

var position = new AMap.LngLat(116, 39);//标准写法

  var position = [116, 39]; //简写

  var map = new AMap.Center('conatiner',{
     center:position
  })

　　使用经纬度类型可以进行一些简单的位置计算，比如点与点、点与线的距离，根据距离差计算另一个经纬度等

　　

var lnglat1 = new AMap.LngLat(116, 39);
var lnglat2 = new AMap.LngLat(117, 39);
var distance = lnglat1.distance(lnglat2);//计算lnglat1到lnglat2之间的实际距离(m)

var lnglat3 = lnglat1.offset(100,50)//lnglat1向东100m，向北50m的位置的经纬度

　　

特别说明：

高德地图采用 GCJ-02 坐标系，即火星坐标系。与 GPS 坐标系，即 WGS-84 坐标系存在一定的偏移量，如果您采集到的坐标数据为GPS坐标，可以先通过AMap.ConvertFrom进行坐标偏移后进行制图或者使用，才能够和高德的底图完全匹配。

像素点 AMap.Pixel

像素点由x和y两个分量组成，通常用来描述地图的容器坐标、地理像素坐标 (平面像素坐标)、点标记和信息窗体的的锚点等。使用方式如下：

 var offset  = new AMap.Pixel(-16,-30);
  var marker = new AMap.Marker({
      offset:offset,
      icon:'xxx.png',
  });
  map.add(marker);

　　

像素尺寸 AMap.Size

像素尺寸由width和height两个分量构成，通常用来描述具有一定大小的对象，比如地图的尺寸，图标的尺寸等

 var mapSize = map.getSize();//获取地图大小，返回的是地图容器的像素大小
  var width = mapSize.width;
  var height = mapSize.height;

  var marker = new AMap.Marker({
	position: [116.405467, 39.907761],
        icon: new AMap.Icon({            
            size: new AMap.Size(40, 50),  //图标的大小
            image: "https://webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png",
            imageOffset: new AMap.Pixel(0, -60)
        })        
  });
  map.add(marker)

　　

经纬度矩形边界 AMap.Bounds

经纬度矩形边界为一个矩形的经纬度范围，用西南角和东北角的两个经纬度来描述，这两个经纬度分别代表边界的最小值和最大值。矩形经纬度边界通常用来描述：地图的当前边界、覆盖物的外包矩形边界、图片图层的覆盖范围等。比如构造一个新的Bounds对象来调成地图的边界范围：

  var southWest = new AMap.LngLat(110,20);
  var northEast = new AMap.LngLat(120,30);
  var bounds = new AMap.Bounds(southWest, northEast);
  map.setBounds(bounds);

　　

经纬度路径边界 AMap.ArrayBounds

3D视图下，由于地图的倾斜和旋转，由于地图边界已经不在是矩形边界，我们提供了ArrayBounds来描述地图当前视口的边界范围，它使用一组经纬度路径来表述一个闭合的区域边界。ArrayBounds提供了contains方法可用来判断经纬度点是否在其内部。

 var map = new AMap.Map('container',{
      zoom:17,
      viewMode:'3D'
  })
  var arrayBounds = map.getBounds();
  var path = arrayBounds.bounds//经纬度的路径
  var isPointInBounds =  arrayBounds.contains(new AMap.LngLat(116, 39))//判断点是否在边界内

　　

地图状态

地图状态包括地图中心点、缩放级别等内容。本章为您介绍设置 / 获取地图状态的常用方法，包括

1. 设置 / 获取地图中心点和缩放级别的方法
2. 根据覆盖物范围调整视野
3. 常用方法列表

设置 / 获取地图中心点和级别 

// 传入经纬度，设置地图中心点
var position = new AMap.LngLat(116, 39);  // 标准写法
// 简写 var position = [116, 39]; 
map.setCenter(position); 
// 获取地图中心点
var currentCenter = map.getCenter(); 
// 设置地图级别，级别为数字。 // PC上，参数zoom可设范围：[3,18]； // 移动端：参数zoom可设范围：[3,19] map.setZoom(13); 

// 获取地图级别 var currentZoom = map.getZoom(); 
map.setZoomAndCenter(14, [116.205467, 39.907761]);

　　

根据覆盖物范围调整视野

地图上覆盖物较多的情况下，如果需要保证所有覆盖物都在视野范围内， 需要将地图调整到合适的缩放等级和中心点，我们可以调用setFitView()

方法，以实现该效果。

// 创建一条折线覆盖物
var path = [
    new AMap.LngLat("116.368904","39.913423"),
    new AMap.LngLat("116.382122","39.901176"),
    new AMap.LngLat("116.387271","39.912501"),
    new AMap.LngLat("116.398258","39.904600")
];
var polyline = new AMap.Polyline({
    path: path,  
    borderWeight: 2, // 线条宽度，默认为 1
    strokeColor: 'red', // 线条颜色
    lineJoin: 'round' // 折线拐点连接处样式
});
map.add(polyline);

// 创建两个点标记
var marker1 = new AMap.Marker({
    position: new AMap.LngLat(117.39, 39.9),   // 经纬度对象，如 new AMap.LngLat(116.39, 39.9); 也可以是经纬度构成的一维数组[116.39, 39.9]
    title: '北京'
});
var marker2 = new AMap.Marker({
    position: new AMap.LngLat(118.39, 39.9),   // 经纬度对象，如 new AMap.LngLat(116.39, 39.9); 也可以是经纬度构成的一维数组[116.39, 39.9]
    title: '北京'
});
map.add(marker1);
map.add(marker2);

// 自动适配到合适视野范围
// 无参数，默认包括所有覆盖物的情况
map.setFitView();
// 传入覆盖物数组，仅包括polyline和marker1的情况
map.setFitView([polyline,marker1]);

　　

常用方法列表

下表所列为常用设置 / 获取地图状态方法，更多详情请查看Map类的全部方法

方法	说明
getZoom( )	获取当前地图缩放级别，在PC上，默认取值范围为[3,18]；在移动设备上，默认取值范围为[3-19]。3D地图会返回浮点数，2D视图为整数。 示例
setZoom(level:Number)	设置地图显示的缩放级别，在PC上，参数zoom可设范围：[3,18]；在移动端：参数zoom可设范围：[3,19]。3D地图下，可将zoom设置为浮点数。 示例
getCenter( )	获取地图中心点经纬度坐标值。
setCenter(position: LngLat)	设置地图显示的中心点。 示例
setZoomAndCenter(zoomLevel:Number,center:LngLat)	地图缩放至指定级别并以指定点为地图显示中心点。 示例
getBounds( )	获取当前地图视图范围。3D地图下返回类型为AMap.ArrayBounds，2D地图下仍返回AMap.Bounds 。
setBounds(bound:Bounds)	指定当前地图显示范围，参数bounds为指定的范围。 示例
getCity(callback:function(result))	获取地图中心点所在区域，回调函数返回对象属性分别对应为{省，市，区/县}。 示例
setCity(city:String，callback:Functon)	按照行政区名称或adcode来设置地图显示的中心点。行政区名称支持中国、省、市、区/县名称，如遇重名的情况，会按城市编码表顺序返回第一个。adcode请在城市编码表中查询。建议不要同时使用center/setCenter()和setCity()，如一起使用程序将以setCity()作为最后结果。 示例
panTo(positon:LngLat)	地图中心点平移至指定点位置。 示例
setStatus(status:Object)	设置当前地图显示状态，包括是否可鼠标拖拽移动地图、地图是否可缩放、地图是否可旋转（rotateEnable）、是否可双击放大地图、是否可以通过键盘控制地图旋转（keyboardEnable）等。   示例

覆盖物/图层管理

添加 / 获取 / 移除覆盖物

添加覆盖物

覆盖物有多种类型，包括点标记、矢量图形、信息窗体等，均可以使用add方法添加。

// 构造点标记
var marker = new AMap.Marker({
    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
    position: [116.405467, 39.907761]
});
// 构造矢量圆形
var circle = new AMap.Circle({
    center: new AMap.LngLat("116.403322", "39.920255"), // 圆心位置
    radius: 1000,  //半径
    strokeColor: "#F33",  //线颜色
    strokeOpacity: 1,  //线透明度
    strokeWeight: 3,  //线粗细度
    fillColor: "#ee2200",  //填充颜色
    fillOpacity: 0.35 //填充透明度
});

// 将以上覆盖物添加到地图上
// 单独将点标记添加到地图上
map.add(marker);
// add方法可以传入一个覆盖物数组，将点标记和矢量圆同时添加到地图上
map.add([marker,circle]);

　　

获取覆盖物

可以使用getAllOverlays(type)方法获取已经添加的覆盖物。其中type参数类型包括marker、circle、polyline、polygon，缺省是返回以上所有类型所有覆盖物。

// 获取已经添加的覆盖物
map.getAllOverlays();

// 获取已经添加的marker
map.getAllOverlays('marker');

移除覆盖物

// 使用remove方法移除覆盖物，参数可以为单个覆盖物对象，也可以是一个包括多个覆盖物的数组
// 单独移除点标记
map.remove(marker);
// 同时移除点标记和矢量圆形
map.remove([marker,circle]);

// 使用clearMap方法删除所有覆盖物
map.clearMap();

　　

地图的交互与事件

地图事件

地图事件是对 Map 底图操作后触发的事件，事件回调中返回 MapsEvent对象。该对象包含触发的对象目标、触发所在经纬度等信息。

map.on('click', function(ev) {
  // 触发事件的对象
  var target = ev.target;
  // 触发事件的地理坐标，AMap.LngLat 类型
  var lnglat = ev.lnglat;
  // 触发事件的像素坐标，AMap.Pixel 类型
  var pixel = ev.pixel;
  // 触发事件类型
  var type = ev.type;
});

　　

点标记

点标记 Marker

// 创建一个 Marker 实例：
var marker = new AMap.Marker({
    position: new AMap.LngLat(116.39, 39.9),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    title: '北京'
});

// 将创建的点标记添加到已有的地图实例：
map.add(marker);

// 移除已创建的 marker
map.remove(marker);

　　也可以一次添加多个点标记到地图实例（其它覆盖物均可使用此方式）：

// 多个点实例组成的数组
var markerList = [marker1, marker2, marker3];

map.add(markerList);

　　

自定义图标标记

如需要自定义点标记内容，可以在创建 Marker 实例的时候，设置 icon 参数来实现。具体可通过以下两种方式：

1. 为创建的 Marker 指定自定义图标 URL ：

var marker = new AMap.Marker({
    position: new AMap.LngLat(116.39,39.9),
    offset: new AMap.Pixel(-10, -10),
    icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL
    title: '北京'
});

map.add(marker);

　　2. 为创建的 Marker 指定 Icon 实例。此种方式可以设置图标大小，偏移等属性，比单纯设置 URL 更加灵活。创建方式如下

// 创建 AMap.Icon 实例：
var icon = new AMap.Icon({
    size: new AMap.Size(40, 50),    // 图标尺寸
    image: '//webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png',  // Icon的图像
    imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
    imageSize: new AMap.Size(40, 50)   // 根据所设置的大小拉伸或压缩图片
});

// 将 Icon 实例添加到 marker 上:
var marker = new AMap.Marker({
    position: new AMap.LngLat(116.405467, 39.907761),
    offset: new AMap.Pixel(-10, -10),
    icon: icon, // 添加 Icon 实例
    title: '北京',
    zoom: 13
});

map.add(marker);

　　或者向已创建好的 Marker 添加 Icon：

marker.setIcon(icon);

三. 自定义内容标记

对于更加复杂的 marker 展示，我们可以使用 Marker类 的 content 属性。content 属性取值为用户自定义的 DOM 节点或者 DOM 节点的 HTML 片段。content 属性比 icon 属性更加灵活，设置了 content 以后会覆盖 icon 属性。具体实例如下：

var content = '<div class="marker-route marker-marker-bus-from"></div>';

var marker = new AMap.Marker({
    content: content,  // 自定义点标记覆盖物内容
    position:  [116.397428, 39.90923], // 基点位置
    offset: new AMap.Pixel(-17, -42) // 相对于基点的偏移位置
});

map.add(marker);

　　

四. 自定义点标记的锚点位置

如果用户自定义点标记内容，无论是自定义 Icon 还是 自定义内容，都需要为定义的图片重新设置锚点位置。设置方法如下：

1.设置 anchor （自 v1.4.13 新增属性）

通过 anchor 可以方便的设置锚点方位。anchor 可选值有  'top-left'、'top-center'、'top-right'、'middle-left'、'center'、'middle-right'、'bottom-left'、'bottom-center'、'bottom-right' ， 分别代表了点标记锚点的不同方位。

var marker = new AMap.Marker({
    icon: '//a.amap.com/jsapi_demos/static/demo-center/marker/marker-bottom-left.png', // 自定义点标记
    position: [116.418481,39.90833], // 基点位置
    offset: new AMap.Pixel(0,0), // 设置点标记偏移量
    anchor:'bottom-left', // 设置锚点方位
});
map.add(marker);

　　

圆形标记 CircleMarker

构造一个圆形覆盖物，v1.4.3版本新增类。可直接满足创建圆形标注的需要。

AMap.CircleMarker 类与下一章介绍到的 AMap.Circle 类均为在地图上绘制圆形覆盖物的方法。这两类的根本不同在于 AMap.Circle 为矢量图形类，随地图的缩放会改变大小；而 AMap.CircleMarker 类则不会随图面缩放而改变。

文本标记 Text

纯文本标记，v1.4.2版本新增类。文本标记的展示内容为纯文本。继承自 Marker 类，具有 Marker 的大部分属性、方法和事件。

点标记事件

点标记支持 click, mouseover 等多种事件。点标记事件的添加和移除和支持的所有事件类型，

 清除所有的覆盖物map.clearMap();