申請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物件，要求經度值在前，緯度值在後：

1.   var map = new AMap.Map('container',{
2.   zoom: 10,
3.   center: [ 116.39,39.9]
4.   });

也可以在地圖初始化過後，任何需要的地方通過方法來改變地圖的中心點和級別

1.   var map = new AMap.Map('container');
2.   map.setZoom(10);
3.   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點將被立即新增到地圖上：

1.   var marker = new AMap.Marker({
2.   position: [ 116.480983, 39.989628],
3.   map:map
4.   });

也可以在建立之後按需更改這些屬性:

1.   var marker = new AMap.Marker();
2.   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節點：

1.   var infowindow = new AMap.InfoWindow({
2.   content: '<h3>高德地圖</h1><div>高德是中國領先的數字地圖內容、導航和位置服務解決方案提供商。</div>',
3.   offset: new AMap.Pixel(0, -30),
4.   size: new AMap.Size(230,0)
5.   })

也可以在建立之後按需更改這些屬性:

1.   infowindow.setSize( new AMap.Size(150,50));
2.   var contentDiv = document.createElement('div');
3.   contentDiv.innerText= '我是資訊窗體';
4.   infowindow.setContent(contentDiv);

 

如何開啟資訊窗體

我們可以在資訊窗體建立之後立即呼叫其open方法將它顯示在需要的位置：

infowindow.open(map,new AMap.LngLat(116.480983, 39.989628)); 

也可以通過事件監聽，在需要的時候才將資訊窗體顯示出來,比如在marker被單擊的時候顯示

1.   var clickHandle = AMap.event.addListener(marker, 'click', function() {
2.   infowindow2.open(map, marker.getPosition())
3.   })

當不再需要點選marker顯示資訊窗體這個功能的時候，可以通過如下方式移除事件繫結

AMap.event.removeListener(clickHandle);

 

使用高階資訊窗體

除了普通的資訊窗體，我們還提供了封裝了周邊搜尋和路線規劃功能在內的高階資訊窗體，要使用高階資訊窗體，首先需要通過plugin方法載入該外掛，然後就可以和普通訊息窗體一樣進行建立和打開了。如果為高階資訊窗體制定了panel屬性，將在以panel的值為id的div上顯示周邊搜尋或者路線規劃的結果，如果需要對高階資訊窗體和panel內容的樣式進行修改，可以對相應classname的css進行重寫：

1.   AMap.plugin( 'AMap.AdvancedInfoWindow',function(){
2.   var infowindow = new AMap.AdvancedInfoWindow({
3.   content: '<h3 class="title">高德地圖</h1>'+
4.   '<div class="content">高德是中國領先的數字地圖內容、'+
5.   '導航和位置服務解決方案提供商。</div>',
6.   offset: new AMap.Pixel(0, -30),
7.   asOrigin:false
8.   });
9.   infowindow.open(map, new AMap.LngLat(116.480983, 39.989628));
10.   })

 

新增工具條和比例尺

高德地圖JSAPI提供了大量豐富的功能控制元件和服務外掛，下面我們來給上面做好的地圖新增兩個常用的控制元件，工具條和比例尺。

 

新增

新增控制元件的時候首先需要載入外掛,同時需要多個外掛的時候第一個引數可以設定為控制元件名稱的陣列

1.   AMap.plugin([ 'AMap.ToolBar','AMap.Scale'],function(){
2.   //TODO 建立控制元件並新增
3.   })

在回撥函式裡我們來進行控制元件的生成和新增:

1.   AMap.plugin([ 'AMap.ToolBar','AMap.Scale'],function(){
2.   var toolBar = new AMap.ToolBar();
3.   var scale = new AMap.Scale();
4.   map.addControl(toolBar);
5.   map.addControl(scale);
6.   })

 

移除

要移除控制元件的時候呼叫地圖的removeControl方法即可

map.removeControl(toolBar);