高德地圖(AMap)JavaScript API的使用__Java

點擊開啟連結轉載： 申請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);