一、圖層類
var layerName = new AMap.TileLayer.類名
layerName.setMap(map);
類名 說明
TileLayer 切片圖層類
TileLayer.Satellite 衛星圖層類，繼承自TileLayer
TileLayer.RoadNet 路網圖層類，繼承自TileLayer
TileLayer.Traffic 實時交通圖層類，繼承自TileLayer
Buildings 3D樓塊圖層類
IndoorMap 室內地圖圖層類
ImageLayer 圖片圖層類
MassMarks 海量麻點圖層類
例如MassMarks
var mass = new AMap.MassMarks({
anchor:new AMap.Pixel(5,5),
url: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
//必填參數，圖標的地址
cursor:’pointer’,
size: new AMap.Size(5, 7),
})
mass.setMap(map)
mass.setData([]) // data: Array 座標數據集. 例：data: [{lnglat: [116.405285, 39.904989], name: i,id:1},{}, …],{}, …]}
結合marker
marker = new AMap.Marker({
content:’’,
map:map
})
mass.on(“mouseover”,function(e){
marker.setPosition(e.data.lnglat);
marker.setLabel({content:e.data.name})
})
參考鏈接：http://lbs.amap.com/api/javascript-api/reference/layer/
二、調用高德地圖
<style>
#container{
width: 500px;
height: 500px;
}
</style>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申請的key值"></script>
<div id=”container”></div>
var map = new AMap.Map(‘container’,{
zoom:10,
center:[116,40]
});
三、點標註
marker = new AMap.Marker({ position: provinces[i].center.split(','), title: provinces[i].name, map: mapObj});
3.1使用自定義maker標註
var marker = new AMap.Marker({ icon : 'http://vdata.amap.com/icons/b18/1/2.png',//24px*24px position : provinces[i].center.split(','), offset : new AMap.Pixel(-12,-12), map : map });
但通常我們使用Icon類來設置marker的icon，因爲icon的大小通常和默認marker的大小不一致，對於使用了組合圖片的開發者來說，這種方式也是最合適的，可以通過增加p_w_picpathOffset屬性來調整圖片的顯示區域：
var icon = new AMap.Icon({ p_w_picpath : '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 : mapObj });
3.2 Icon參數詳情
參數名稱 類型 說明
size Size 圖標尺寸，默認值(36,36)
p_w_picpathOffset Pixel 圖標取圖偏移量。當p_w_picpath使用了圖片精靈時，可通過size和p_w_picpathOffset配合，顯示圖標的指定範圍
p_w_picpath String 圖標的取圖地址。默認爲藍色圖釘圖片
p_w_picpathSize Size 修改原始圖片的大小，將拉伸或壓縮圖片，等同於CSS中的background-size 屬性。可用於實現高清屏的高清效果
3.3在地圖上畫圓
var circle = new AMap.Circle({
map:map,
center:["116.418757","39.917544"], //圓的中心位置
radius:10000, //表示半徑的爲多少米
fillColor:"#ff0000", //填充顏色必須爲16進制
})
參考：http://lbs.amap.com/api/javascript-api/reference/overlay/#Marker
四、區域搜索
AMap.service('AMap.DistrictSearch',function(){//回調函數
districtSearch = new AMap.DistrictSearch({
level:"country",
extensions:"all",
subdistrict:3
});
districtSearch.search('中國',function(status, result){
console.log(result)
})
})
返回結果
Object {info: "OK", districtList: Array[1]}
districtList:Array[1] //數組內有一個元素
0:Obejct //數組內的元素
boundaries: //邊界
center:
citycode
name: "中華人民共和國"
districtList:Array[34] //34個區域，23個省、4個直轄市、2個特別行政區、5個自治區。
....
依次類推
District 對象
屬性 類型 說明
name String 行政區名稱
citycode String 城市編碼
adcode String 區域編碼
center LngLat 城市中心點
level String 行政區劃級別
boundaries Array.<Array.<LngLat>> extensions爲“all”時，行政區邊界座標集合 若行政區包含羣島，則座標點爲各島的邊界，島間邊界經緯度使用二維數組來表示
districtList Array.<District> 下級行政區信息列表 subdistrict 爲0時，不返回該對象
返回結果中的center可以直接當做position來調用。
4.1 畫邊界函數
districtSearch.search('朝陽區', function(status, result){ var bounds = result.districtList[0].boundaries; var polygon = new AMap.Polygon({ map: map, strokeWeight: 1, path: bounds, fillOpacity: 0.7, fillColor: '#CCF3FF', strokeColor: '#CC66CC' }); map.setFitView();});
amapAdcode.addPolygon = function(boundaries) {//往地圖上添加覆蓋物
if (boundaries) {
for (var i = 0, l = boundaries.length; i < l; i++) {
//生成行政區劃polygon
var polygon = new AMap.Polygon({
map: map,
path: boundaries[i]
});
this._overlay.push(polygon);
}
map.setFitView();//地圖自適應
}
};
for(var i=0;i<res.districtList[0].boundaries.length;i++){
polygon = new AMap.Polygon({
map:map,
path:res.districtList[0].boundaries[i],
fillOpacity:0,
strokeWidth:2px
})
}
五、高德地圖服務插件
AMap.service(service:Array.<service>,callback:function)
服務加載方法，參數service可以爲服務插件中的一個或多個
AMap.Autocomplete
輸入提示，根據輸入關鍵字提示匹配信息
AMap.ArrivalRange
公交到達圈，根據起點座標，計算出在指定時間內能夠到達的距離範圍
AMap.CitySearch
城市查詢，IP定位獲取當前城市信息
AMap.DistrictSearch
行政區查詢服務，提供行政區相關信息
AMap.Driving
駕車路線規劃服務，提供起、終點座標的駕車導航路線查詢功能
AMap.Geocoder
地理編碼與逆地理編碼服務，用於地址描述與座標間的相互轉換
AMap.LineSearch
公交路線服務，提供公交路線相關信息查詢服務
AMap.PlaceSearch
地點搜索服務插件，提供某一特定地區的位置查詢服務
AMap.RoadInfoSearch
道路及道路交叉口查詢服務
AMap.StationSearch
公交站點查詢服務，提供途經公交線路、站點經緯度等信息
AMap.Transfer
公交換乘服務，提供起、終點公交路線規劃服務，整合步行方式
AMap.Walking
步行導航服務，提供起、終點步行路線規劃服務
AMap.Weather
天氣查詢服務，提供城市/區縣天氣預報服務
http://lbs.amap.com/api/javascript-api/reference/search_plugin/#m_AMap.PlaceSearch
PlaceSearch 說明。
res.districtList[0].districtList[0].districtList[0].districtList[0]
5.1地點搜素
AMap.service(["AMap.PlaceSearch"], function() {
placeSearch = new AMap.PlaceSearch({ //構造地點查詢類
type:'醫療保健服務',
pageSize:30,
city: "010" //城市
});
//關鍵字查詢
placeSearch.search('', function(status, result) {
if (status === 'complete' && result.info === 'OK') {
res = result;
console.log(result)
}
});
});
缺陷，一頁只能顯示30個點。
六、海量點
MassMarks 類
此類表示海量點類，利用該類可同時在地圖上展示萬級別的點，目前僅適用於html5瀏覽器。
AMap.MassMarks(data:Array.<Object>,opts:MassMarksOptions)
MassMarksOptions 類型 說明
zIndex Number 圖層疊加的順序值，0表示最底層。默認zIndex：5
opacity Float 圖層的透明度，取值範圍[0,1]，1代表完全不透明，0代表完全透明
zooms Array 支持的縮放級別範圍，默認範圍[3-18]，在PC上，取值範圍爲[3-18]；在移動設備上，取值範圍爲[3-19]
anchor Pixel 必填參數，圖標顯示位置偏移量，以圖標的左上角爲基準點（0,0）點，例如：anchor:new AMap.Pixel(5,5)
url String 必填參數,圖標的地址
size Size 必填參數，圖標的尺寸；例如：size:new AMap.Size(11,11)
cursor String 指定鼠標懸停時的鼠標樣式，自定義cursor，IE僅支持cur/ani/ico格式，Opera不支持自定義cursor
alwaysRender Boolean 表示是否在拖拽縮放過程中實時重繪，默認true，建議超過10000的時候設置false
data: [{lnglat: [116.405285, 39.904989], name: i,id:1},{}, …]或url串，支持從服務器直接取數據