高德地圖API筆記

時間 2021-08-14

標籤 javascript php html html5 java linux web api 數組瀏覽器欄目 JavaScript 简体版

原文原文鏈接

1、圖層類 1javascript

2、調用高德地圖 2php

3、點標註 2html

3.1使用自定義maker標註 2html5

5.1地點搜素 7瀏覽器

1、圖層類

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/

2、調用高德地圖

var map = new AMap.Map(‘container’,{

zoom:10,

center:[116,40]

});

3、點標註

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

4、區域搜索

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();//地圖自適應
    }
};