高德地圖API筆記

一、圖層類 1

二、調用高德地圖 2

三、點標注 2

3.1使用自定義maker標注 2

3.2 Icon參數詳情 3

3.3在地圖上畫圓 3

四、區域搜索 4

4.1 畫邊界函數 5

五、高德地圖服務插件 6

5.1地點搜素 7

六、 海量點 8

一、圖層類

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串，支持從服務器直接取數據