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

 

申請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);

更多詳情，請參考官方實例文檔：http://lbs.amap.com/api/javascript-api/example/map/map-show/