注冊賬號並申請Key
1. 首先，注冊開發者賬號，成為高德開放平台開發者 https://lbs.amap.com/api/javascript-api/guide/abc/prepare
2. 登陸之后，在進入「應用管理」 頁面「創建新應用」
3. 為應用添加 Key，「服務平台」一項請選擇「 Web 端 ( JSAPI ) 」
准備頁面
1. 在頁面添加 JS API 的入口腳本標簽，並將其中「您申請的key值」替換為您剛剛申請的 key；
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值"></script>2. 添加div標簽作為地圖容器，同時為該div指定id屬性；
<div id="container"></div>3. 為地圖容器指定高度、寬度；
#container {width:300px; height: 180px; }4. 進行移動端開發時，請在head內添加viewport設置，以達到最佳的繪制性能；
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">5. 在完成如上准備工作之后便可以開始進行開發工作了，查看快速入門。
異步加載 JS API
上一節說明的是最基本的同步加載 JS API 的方式，如果您需要異步加載，比如通過appendChild，或者通過require等異步方式來加載，這時需要您需要先准備一個全局的回調函數作為 JS API 異步加載的回調函數，並將其函數名作為callback參數添加在 JS API 的引用地址后面，此時要注意，回調函數應該在腳本請求發出之前進行聲明。異步加載方式只有在回調之后，才能開始調用JSAPI的相關接口。比如
<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：
var map = new AMap.Map('container');創建的同時可以給地圖設置中心點、級別、顯示模式、自定義樣式等屬性：
var map = new AMap.Map('container', { zoom:11,//級別 center: [116.397428, 39.90923],//中心點坐標 viewMode:'3D'//使用3D視圖 });
圖層
默認情況下，地圖只顯示標准底圖，如需要疊加別的圖層，可以通過map.add方法添加圖層：
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{
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的 |
| 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();