高德地圖Web端JavaScript API開發(二)---在地圖上繪製(點標註)
使用高德地圖在很多時候需要在地圖上標記位置，並且很多時候需要用到自定義的圖示去完成這種位置的標記。
當然，這些功能高德地圖都為我們準備了，比如常用的地圖覆蓋物Marker和資訊窗體等。這裡就先說一下點標記的Marker。
Marker是一個用來往地圖上新增點標記的類。使用它將任何你希望使用者看到的興趣點標註在地圖上，你可以為標註指定任意的Icon或者內容，以及文字Label。下面向大家介紹如何使用Marker來構建一個豐富的地圖應用。
建立一個最簡單的Marker標記，我們只需要設定兩個引數，分別是他的經緯度位置和所要新增到的map物件。
position是要新增的marker的經緯度，可以使用LngLat物件，如 new AMap.LngLat(116.39,39.9);
也可以直接使用經度和緯度構成的一次二元陣列，如[116.39,39.9]。
一、首先還是要載入地圖；
var map = new AMap.Map('container',{
resizeEnable: true, //可縮放
zoom:12, //縮放級別
center:[119.1664,29.02523] //位置中心點
}); 二、載入Marker
marker = new AMap.Marker({
position: [lng,lat],//點標記在地圖上顯示的位置，預設為地圖中心點
offset: new AMap.Pixel(-16,-45),//位置偏移量，預設值為Pixel(-10，-34),(0,0)時marker左上角對準position的位置 這樣就完成了基本的的點標記
介紹一下關於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等 |
|
方法 |
返回值 |
說明 |
|---|---|---|
|
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 |
獲取使用者自定義屬性 |
接下來就說一下使用自定義圖示的方法，就是上述第二步稍微修改一下即可。
使用自定義Marker需要自定義Icon
marker = new AMap.Marker({
icon: "http://vdata.amap.com/icons/b18/1/2.png",//自定義Icon在專案中的位置
position: [lng,lat],
offset: new AMap.Pixel(-16,-45),
title: data[i].number,
map: map
});但是通常我們使用Icon類來設定marker的icon，因為icon的大小通常和預設marker的大小不一致，對於使用組合圖片的開發的來說，這種當時是最合適的，可以通過imageOffset屬性來調整圖片的顯示區域。
這是官方的Demo
var icon = new AMap.Icon({
image : 'http://vdata.amap.com/icons/b18/1/2.png',//圖片大小為24px*24px
//icon可預設，預設時為預設的藍色水滴圖示，
size : new AMap.Size(24,24)
});var marker = new AMap.Marker({
icon : icon,//24px*24px
position : provinces[i].center.split(','),
offset : new AMap.Pixel(-12,-12),
map : map
});這是我自己專案裡面寫的程式碼，根據不同的需求，載入不同的圖示，僅供參考
if(operNum < 0.2*maxNumber){
var icon = new AMap.Icon({
image: 'images/bike/green.png',
size: new AMap.Size(32, 45)
});
}marker = new AMap.Marker({
icon: icon,
position: [lng,lat],
offset: new AMap.Pixel(-16,-45),
title: data[i].number+":"+data[i].name+":總數"+data[i].restorecount+":在架"+data[i].rentcount,
map: map
});這樣就可以使用迴圈去載入地圖上的多個Marker
引數說明：
|
引數名稱 |
型別 |
說明 |
|---|---|---|
|
size |
Size |
圖示尺寸，預設值(36,36) |
|
imageOffset |
Pixel |
圖示取圖偏移量。當image使用了圖片精靈時，可通過size和imageOffset配合，顯示圖示的指定範圍 |
|
image |
String |
圖示的取圖地址。預設為藍色圖釘圖片 |
|
imageSize |
Size |
修改原始圖片的大小，將拉伸或壓縮圖片，等同於CSS中的background-size屬性。可用於實現高清屏的高清效果 |
使用Content方式標記
content屬性用來指定作為標記的dom節點或者dom節點的outerHTML，這裡使用一個div作為content來為marker多新增一個標記
var content= "<div classname="taiwan">寶島臺灣</div>";
//或者
var content = document.createElement('div');
content.innerHTML = '寶島臺灣';
content.className = 'taiwan';
marker = new AMap.Marker({
content: content,
position: provinces[i].center.split(','),
title: provinces[i].name,
offset: new AMap.Pixel(-10,0),
map: map
});