申請JSAPI的開發者key
申請地址：http://lbs.amap.com/dev/key
引入高德地圖JavaScript API文件:
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申請的key值"></script>
創建地圖容器
在頁面body里你想展示地圖的地方創建一個div 容器，並指定id標識:
<div id="container"></div>
指定容器大小
按照需要設定地圖容器的大小，確保大小合適,比如用CSS這樣設置它:
#container {width:300px; height: 180px; }
創建地圖
設定地圖的中心點和級別
我們一般需要給地圖按需設定中心點和坐標等屬性，這里可以通過兩種方式，第一種，直接在地圖初始化的時候傳入相關屬性，center屬性的值可以使經緯度的二元數組，也可以是AMap.LngLat對象，要求經度值在前，緯度值在后：
-
var map = new AMap.Map('container',{
-
zoom: 10,
-
center: [ 116.39,39.9]
-
});
也可以在地圖初始化過后，任何需要的地方通過方法來改變地圖的中心點和級別
-
var map = new AMap.Map('container');
-
map.setZoom(10);
-
map.setCenter([116.39,39.9]);
map基本參數：
| layers | Array | 地圖圖層數組，數組可以是圖層 中的一個或多個 |
| zoom | Number | 地圖顯示的縮放級別，若center與level未賦值，地圖初始化默認顯示用戶所在城市范圍 |
| center | LngLat | 地圖中心點坐標值（自V1.3.0起變更為view對象中的center屬性） |
| zooms | Array | 地圖顯示的縮放級別范圍，在PC上，默認為[3,18]，取值范圍[3-18]；在移動設備上，默認為[3-19],取值范圍[3-19] |
| lang | String | 地圖語言類型，可選值：zh_cn：中文簡體，en：英文，zh_en：中英文對照 |
| cursor | String | 地圖默認鼠標樣式。參數cursor應符合CSS的cursor屬性規范 |
| animateEnable | Boolean | 地圖平移過程中是否使用動畫（如調用panBy、panTo、setCenter、setZoomAndCenter等函數 |
| isHotspot | Boolean | 是否開啟地圖熱點，默認false 不打開 （自v1.3 新增） |
| rotateEnable | Boolean | 地圖是否可旋轉，默認false （自v1.3 新增） |
| resizeEnable | Boolean | 是否監控地圖容器尺寸變化，默認值為false |
| dragEnable | Boolean | 地圖是否可通過鼠標拖拽平移，默認為true。此屬性可被setStatus/getStatus 方法控制 |
| zoomEnable | Boolean | 地圖是否可縮放，默認值為true。此屬性可被setStatus/getStatus 方法控制 |
| doubleClickZoom | Boolean | 地圖是否可通過雙擊鼠標放大地圖，默認為true。此屬性可被setStatus/getStatus 方法控制 |
| keyboardEnable | Boolean | 地圖是否可通過鍵盤控制，方向鍵控制地圖平移，"+"和"-"可以控制地圖的縮放 |
| jogEnable | Boolean | 地圖是否使用緩動效果，默認值為true。此屬性可被setStatus/getStatus 方法控制 |
| scrollWheel | Boolean | 地圖是否可通過鼠標滾輪縮放瀏覽，默認為true。此屬性可被setStatus/getStatus 方法控制 |
| touchZoom | Boolean | 地圖在移動終端上是否可通過多點觸控縮放瀏覽地圖，默認為true |
| mapStyle | String | 設置地圖樣式，支持normal（默認樣式）、dark（深色樣式）、light（淺色樣式）、fresh(osm樣式) |
| features | Array | 設置地圖上顯示的元素種類，支持bg（地圖背景）、point（興趣點）、road（道路）、building（建築物） |
添加點標記
創建好地圖之后，我們就可以在地圖上添加點標記了，用來標注任何用戶感興趣的位置和信息，這里使用到了AMap.Marker這個類。
點標記的創建與添加
同地圖一樣，點標記可以在創建的時候設定位置等屬性，如果設定了map屬性的話，marker點將被立即添加到地圖上：
-
var marker = new AMap.Marker({
-
position: [ 116.480983, 39.989628],
-
map:map
-
});
也可以在創建之后按需更改這些屬性:
-
var marker = new AMap.Marker();
-
marker.setMap( map);
點標記的移除
移除的話，同樣使用setMap方法,不傳參數或者傳入空參數：
marker.setMap();
Marker參數詳情
| 參數名稱 | 類型 | 說明 |
|---|---|---|
| map | Map | 要顯示該marker的地圖對象 |
| position | LngLat | 點標記在地圖上顯示的位置，默認為地圖中心點 |
| offset | Pixel | 位置偏移量，默認值為Pixel(-10,-34)。(0,0)時marker左上角對准position的位置，該屬性表示將marker移動多少像素之后，可以使錨點對准position |
| icon | String/Icon | 需在點標記中顯示的圖標。可以是一個本地圖標地址，或者Icon對象。有合法的content內容時，此屬性無效 |
| content | String/Object | 點標記顯示內容，可以是HTML要素字符串或者HTML DOM對象。content有效時，icon屬性將被覆蓋 |
| topWhenClick | Boolean | 鼠標點擊時marker是否置頂，默認false ，不置頂（自v1.3 新增） |
| topWhenMouseOver | Boolean | 鼠標移進時marker是否置頂，默認false，不置頂（自v1.3 新增） |
| draggable | Boolean | 設置點標記是否可拖拽移動，默認為false |
| raiseOnDrag | Boolean | 設置拖拽點標記時是否開啟點標記離開地圖的效果 |
| cursor | String | 指定鼠標懸停時的鼠標樣式，自定義cursor，IE僅支持cur/ani/ico格式，Opera不支持自定義cursor |
| visible | Boolean | 點標記是否可見，默認為true |
| zIndex | Number | 點標記的疊加順序。地圖上存在多個點標記疊加時，通過該屬性使級別較高的點標記在上層顯示，默認100 |
| angle | Number | 點標記的旋轉角度支持IE9及以上版本 |
| autoRotation | Boolean | 是否自動旋轉。點標記在使用moveAlong動畫時，路徑方向若有變化，點標記是否自動調整角度，默認false，IE8以下不支持 |
| animation | String | 點標記的動畫效果，默認值：“AMAP_ANIMATION_NONE”。可選值：“AMAP_ANIMATION_NONE”，無動畫效果；“AMAP_ANIMATION_DROP”，點標掉落效果；“AMAP_ANIMATION_BOUNCE”，點標彈跳效果 |
| shadow | Icon | 點標記陰影，不設置該屬性則點標記無陰影 |
| title | String | 鼠標滑過點標記時的文字提示，不設置則鼠標滑過點標無文字提示 |
| clickable | Boolean | 點標記是否可點擊 |
| bubble | Boolean | 默認false，true的時候事件可以穿透到地圖 |
| shape | MarkerShape | 設置Marker的可點擊區域，在定義的區域內可觸發Marker的鼠標點擊事件 |
| extData | Any | 用戶自定義屬性，支持JavaScript API任意數據類型，如Marker的id等 |
Marker的方法
| 方法 | 返回值 | 說明 |
|---|---|---|
| getOffset( ) | Pixel | 獲取Marker偏移量（自v1.3 新增） |
| setOffset(offset:Pixel) | 設置Marker偏移量（自v1.3 新增） | |
| setAnimation(animate:String ) | 設置點標記的動畫效果 | |
| getAnimation( ) | String | 獲取點標記的動畫效果類型 |
| setClickable(clickable:Boolean ) | 設置點標記是支持鼠標單擊事件 | |
| getClickable( ) | Boolean | 獲取點標記是否支持鼠標單擊事件 |
| getPosition( ) | LngLat | 獲取點標記的位置 |
| setPosition(lnglat:LngLat) | 設置點標記位置 | |
| setAngle(angle:Number) | 設置點標記的旋轉角度 | |
| getAngle() | Number | 獲取點標記的旋轉角度 |
| setzIndex(index:Number) | 設置點標記的疊加順序，默認最先添加的點標記在最底層 | |
| setIcon(content:String/Icon) | 設置點標記的顯示圖標 | |
| getIcon( ) | String /Icon | 當點標記未自定義圖標時，獲取Icon內容 |
| setDraggable(draggable:Boolean) | 設置點標記對象是否可拖拽移動 | |
| getDraggable( ) | Boolean | 獲取點標記對象是否可拖拽移動 |
| hide( ) | 點標記隱藏 | |
| show( ) | 點標記顯示 | |
| setCursor(Cursor) | String | 設置鼠標懸停時的光標。 參數cur可為CSS標注中的光標樣式 |
| setContent(html:String|htmlDOM) | 設置點標記顯示內容，可以是HTML要素字符串或者HTML DOM對象 | |
| getContent( ) | String | 獲取點標記內容 |
| moveAlong(lnglatlist,speed,f,circlable) | 以指定的速度，點標記沿指定的路徑移動。參數lnglats為路徑坐標串；speed為指定速度，單位：千米/小時；回調函數f中可添加自定義功能；參數loop表明是否循環執行動畫，默認為false | |
| moveTo(lnglat,speed,Function) | 以給定速度移動點標記到指定位置。參數lnglat為指定位置，必設；speed為指定速度，單位：千米/小時；回調函數f中添加自定義功能 | |
| stopMove( ) | 點標記停止動畫 | |
| setMap(map:Map) | 為Marker指定目標顯示地圖。當參數值取null時，地圖上移除當前Marker：setMap(null) | |
| getMap() | Map | 獲取Marker所在地圖對象 |
| setTitle(title:String) | 鼠標滑過點標時的文字提示 | |
| getTitle( ) | String | 獲取點標記的文字提示 |
| setTop(isTop:Boolean) | 地圖上有多個marker時，當isTop為true時，marker將顯示在最前面；當為false時，marker取消置頂 | |
| getTop( ) | Boolean | |
| setShadow(icon:Icon) | 為marker設置陰影效果 | |
| getShadow( ) | Icon | 獲取marker的陰影圖標 |
| setShape(shape:MarkerShape) | 設置marker的可點擊區域 | |
| getShape( ) | MarkerShape | 獲取marker的可點擊區域 |
| setExtData(ext:Any) | 設置用戶自定義屬性，支持JavaScript API任意數據類型，如Marker的id等 | |
| getExtData( ) | Any | 獲取用戶自定義屬性 |
添加信息窗體
我們也可以用信息窗體InfoWindow類來向用戶展示一些更詳細的信息，比如點擊一個點標記后，通過信息窗體來展示這個點標記在哪里
信息窗體的創建與設定
信息窗體一樣可以在創建的時候設定內容、偏移量、大小等屬性，offset是信息窗體的錨點以position為基准位置的像素偏移量，content除了使用字符串的形式外也可以直接設定為某個創建好的DOM節點：
-
var infowindow = new AMap.InfoWindow({
-
content: '<h3>高德地圖</h1><div>高德是中國領先的數字地圖內容、導航和位置服務解決方案提供商。</div>',
-
offset: new AMap.Pixel(0, -30),
-
size: new AMap.Size(230,0)
-
})
也可以在創建之后按需更改這些屬性:
-
infowindow.setSize( new AMap.Size(150,50));
-
var contentDiv = document.createElement('div');
-
contentDiv.innerText= '我是信息窗體';
-
infowindow.setContent(contentDiv);
如何打開信息窗體
我們可以在信息窗體創建之后立即調用其open方法將它顯示在需要的位置：
infowindow.open(map,new AMap.LngLat(116.480983, 39.989628)); 也可以通過事件監聽，在需要的時候才將信息窗體顯示出來,比如在marker被單擊的時候顯示
-
var clickHandle = AMap.event.addListener(marker, 'click', function() {
-
infowindow2.open(map, marker.getPosition())
-
})
當不再需要點擊marker顯示信息窗體這個功能的時候，可以通過如下方式移除事件綁定
AMap.event.removeListener(clickHandle);
使用高級信息窗體
除了普通的信息窗體，我們還提供了封裝了周邊搜索和路線規划功能在內的高級信息窗體，要使用高級信息窗體，首先需要通過plugin方法加載該插件，然后就可以和普通信息窗體一樣進行創建和打開了。如果為高級信息窗體制定了panel屬性，將在以panel的值為id的div上顯示周邊搜索或者路線規划的結果，如果需要對高級信息窗體和panel內容的樣式進行修改，可以對相應classname的css進行重寫：
-
AMap.plugin( 'AMap.AdvancedInfoWindow',function(){
-
var infowindow = new AMap.AdvancedInfoWindow({
-
content: '<h3 class="title">高德地圖</h1>'+
-
'<div class="content">高德是中國領先的數字地圖內容、'+
-
'導航和位置服務解決方案提供商。</div>',
-
offset: new AMap.Pixel(0, -30),
-
asOrigin:false
-
});
-
infowindow.open(map, new AMap.LngLat(116.480983, 39.989628));
-
})
添加工具條和比例尺
高德地圖JSAPI提供了大量豐富的功能控件和服務插件，下面我們來給上面做好的地圖添加兩個常用的控件，工具條和比例尺。
添加
添加控件的時候首先需要加載插件,同時需要多個插件的時候第一個參數可以設定為控件名稱的數組
-
AMap.plugin([ 'AMap.ToolBar','AMap.Scale'],function(){
-
//TODO 創建控件並添加
-
})
在回調函數里我們來進行控件的生成和添加:
-
AMap.plugin([ 'AMap.ToolBar','AMap.Scale'],function(){
-
var toolBar = new AMap.ToolBar();
-
var scale = new AMap.Scale();
-
map.addControl(toolBar);
-
map.addControl(scale);
-
})
移除
要移除控件的時候調用地圖的removeControl方法即可
map.removeControl(toolBar);