高德地图网页端js API

时间 2019-11-17

标签地图网页 api 栏目 HTML 繁體版

原文原文链接

注册帐号并申请Key

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

2. 登录以后，在进入「应用管理」页面「建立新应用」css

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

准备页面

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属性；java

HTML

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

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

CSS

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

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

HTML

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

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

异步加载 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属性为地图设置多个图层：
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{
        width: 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等。

插件的使用流程

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

插件的引入

异步加载多个插件

 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 开发以前有几个基础类型须要了解一下，包括：

经纬度 AMap.LngLat
像素点 AMap.Pixel
像素尺寸 AMap.Size
经纬度矩形边界 AMap.Bounds
经纬度路径边界 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))//判断点是否在边界内

地图状态

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

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

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

// 传入经纬度，设置地图中心点
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();