1. 首先,註冊開發者帳號,成爲高德開放平臺開發者 https://lbs.amap.com/api/javascript-api/guide/abc/preparejavascript
2. 登錄以後,在進入「應用管理」 頁面「建立新應用」css
3. 爲應用添加 Key,「服務平臺」一項請選擇「 Web 端 ( JSAPI ) 」html
1. 在頁面添加 JS API 的入口腳本標籤,並將其中「您申請的key值」替換爲您剛剛申請的 key;前端
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值"></script>
2. 添加div
標籤做爲地圖容器,同時爲該div
指定id
屬性;java
<div id="container"></div>
3. 爲地圖容器指定高度、寬度;web
#container {width:300px; height: 180px; }
4. 進行移動端開發時,請在head
內添加viewport
設置,以達到最佳的繪製性能;chrome
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
5. 在完成如上準備工做以後即可以開始進行開發工做了,查看快速入門。api
上一節說明的是最基本的同步加載 JS API 的方式,若是您須要異步加載,好比經過appendChild
,或者經過require
等異步方式來加載,這時須要您須要先準備一個全局的回調函數做爲 JS API 異步加載的回調函數,並將其函數名做爲callback
參數添加在 JS API 的引用地址後面,此時要注意,回調函數應該在腳本請求發出以前進行聲明。異步加載方式只有在回調以後,才能開始調用JSAPI的相關接口。好比數組
<script> window.onLoad = function(){ var map = new AMap.Map('container'); } var url = 'https://webapi.amap.com/maps?v=1.4.15&key=64856519773d3e62866f4f1b502841fc&callback=onLoad'; var jsapi = doc.createElement('script'); jsapi.charset = 'utf-8'; jsapi.src = url; document.head.appendChild(jsapi); </script>
按照「準備」篇完成頁面準備工做以後就能夠真正開始地圖的開發工做了。前端框架
簡單建立一個地圖只須要一行代碼,構造參數中的container
爲準備階段添加的地圖容器的id
:
var map = new AMap.Map('container');
建立的同時能夠給地圖設置中心點、級別、顯示模式、自定義樣式等屬性:
var map = new AMap.Map('container', { zoom:11,//級別 center: [116.397428, 39.90923],//中心點座標 viewMode:'3D'//使用3D視圖 });
默認狀況下,地圖只顯示標準底圖,如須要疊加別的圖層,能夠經過map.add
方法添加圖層:
var map = new AMap.Map('container', { resizeEnable: true, center: [116.397428, 39.90923], zoom: 13 });
//實時路況圖層
var trafficLayer = new AMap.TileLayer.Traffic({ zIndex: 10 }); map.add(trafficLayer);//添加圖層到地圖
也能夠在地圖初始化的時候經過layers
屬性爲地圖設置多個圖層:
layers
var map = new AMap.Map('container', { center: [116.397428, 39.90923], layers: [//使用多個圖層 new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet() ], zooms: [4,18],//設置地圖級別範圍 zoom: 13 });
地圖 JS API 提供了標準、衛星、路網、路況、建築等多個官方圖層,同時也提供了加載第三方WMS、WMTS、XYZ等標準圖層的接口,也提供了把通常的圖片、Canvas、視頻、熱力等做爲圖層的能力,
JS API 提供了在地圖之上繪製覆蓋物的能力,好比點標記 Marker、文本標記 Text、圓點標記 CircleMarker。
添加點標記的方法很是簡單,好比添加一個默認樣式的Marker:
var marker = new AMap.Marker({ position:[116.39, 39.9]//位置 }) map.add(marker);//添加到地圖
移除的方法以下:map.remove(marker)
也提供了繪製圓Circle、折線 Polyline、多邊形 Polygon、橢圓 Ellipse、矩形 Rectangle、貝瑟爾曲線 BesizerCurve等矢量圖形的能力,好比添加折線:
var lineArr = [ [116.368904, 39.913423], [116.382122, 39.901176], [116.387271, 39.912501], [116.398258, 39.904600] ]; var polyline = new AMap.Polyline({ path: lineArr, //設置線覆蓋物路徑 strokeColor: "#3366FF", //線顏色 strokeWeight: 5, //線寬 strokeStyle: "solid", //線樣式 }); map.add(polyline);
JS API 提供的Map、點標記、矢量圖形的實例均支持事件,鼠標或者觸摸操做均會觸發相應的事件。咱們經過給點標記綁定click
事件來簡單瞭解事件系統和信息窗體的基本使用:
var infoWindow = new AMap.InfoWindow({ //建立信息窗體 isCustom: true, //使用自定義窗體 content:'<div>信息窗體</div>', //信息窗體的內容能夠是任意html片斷 offset: new AMap.Pixel(16, -45) }); var onMarkerClick = function(e) { infoWindow.open(map, e.target.getPosition());//打開信息窗體 //e.target就是被點擊的Marker } var marker = new AMap.Marker({ position: [116.481181, 39.989792] }) map.add(marker); marker.on('click',onMarkerClick);//綁定click事件
JS API 支持多種加載方式,能夠順序加載也能夠異步加載,同時也能夠做爲通常腳本資源被 RequireJS 等前端框架加載。
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值"></script> <script type="text/javascript"> var map = new AMap.Map('container', { center:[117.000923,36.675807], zoom:11 }); </script>
異步加載指的是爲 JS API 指定加載的回調函數,在 JS API 的主體資源加載完畢以後,將自動調用該回調函數。回調函數應該聲明在 JS API 入口文件引用以前,異步加載能夠減小對其餘腳本執行的阻塞,HTTPS 下咱們也建議使用異步方式:
<script type="text/javascript"> window.init = function(){ var map = new AMap.Map('container', { center:[117.000923,36.675807], zoom:11 }); } </script> <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值&callback=init"></script>
或者
window.onLoad = function(){ var map = new AMap.Map('container'); } var url = 'https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值&callback=onLoad'; var jsapi = document.createElement('script'); jsapi.charset = 'utf-8'; jsapi.src = url; document.head.appendChild(jsapi);
在使用 RequireJS 等前端框架時,JS API 應該被看成通常腳本資源,並使用上述異步方式進行加載,好比
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <style type="text/css"> body,html,#container{ width: 100%; height: 100%; margin: 0px } </style> <title>經過RequireJS加載</title> </head> <body> <div id="container" tabindex="0"></div> <script src="https://webapi.amap.com/js/require.js" data-main="./require-init"></script> </body> </html>
require-init.js
require.config({ paths: { "amap": "https://webapi.amap.com/maps?v=1.4.15&key=&callback=onAMapLoaded" } }); window.onAMapLoaded = function() { require(['initAMap'], function(mapIniter) { mapIniter.init(); }) } require(['amap'])
nitAMap.js
define(function() { var init = function() { var amap = new AMap.Map('container'); }; return { init: init }; });
JS API 提供了衆多的插件功能,這些功能不會主動隨着 JSAPI 主體資源下發,須要引入以後才能使用這些插件的功能。這些功能包括:
AMap.plugin(['AMap.ToolBar','AMap.Driving'],function(){//異步同時加載多個插件 var toolbar = new AMap.ToolBar(); map.addControl(toolbar); var driving = new AMap.Driving();//駕車路線規劃 driving.search(/*參數*/) });
類名 |
類功能說明 |
---|---|
AMap.ElasticMarker |
靈活點標記,能夠隨着地圖級別改變樣式和大小的 Marker |
AMap.ToolBar |
工具條,控制地圖的縮放、平移等 |
AMap.Scale |
比例尺,顯示當前地圖中心的比例尺 |
AMap.OverView |
鷹眼,顯示縮略圖 |
AMap.MapType |
圖層切換,用於幾個經常使用圖層切換顯示 |
AMap.Geolocation |
定位,提供了獲取用戶當前準確位置、所在城市的方法 |
AMap.AdvancedInfoWindow |
高級信息窗體,整合了周邊搜索、路線規劃功能 |
AMap.Autocomplete |
輸入提示,提供了根據關鍵字得到提示信息的功能 |
AMap.PlaceSearch |
地點搜索服務,提供了關鍵字搜索、周邊搜索、範圍內搜索等功能 |
AMap.PlaceSearchLayer |
搜索結果圖層類,將搜索結果做爲圖層展現 |
AMap.DistrictSearch |
行政區查詢服務,提供了根據名稱關鍵字、citycode、adcode 來查詢行政區信息的功能 |
AMap.LineSearch |
公交路線服務,提供公交路線相關信息查詢服務 |
AMap.StationSearch |
公交站點查詢服務,提供途經公交線路、站點位置等信息 |
AMap.Driving |
駕車路線規劃服務,提供按照起、終點進行駕車路線的功能 |
AMap.TruckDriving |
貨車路線規劃 |
AMap.Transfer |
公交路線規劃服務,提供按照起、終點進行公交路線的功能 |
AMap.Walking |
步行路線規劃服務,提供按照起、終點進行步行路線的功能 |
AMap.Riding |
騎行路線規劃服務,提供按照起、終點進行騎行路線的功能 |
AMap.DragRoute |
拖拽導航插件,可拖拽起終點、途經點從新進行路線規劃 |
AMap.ArrivalRange |
公交到達圈,根據起點座標,時長計算公交出行是否可達及可達範圍 |
AMap.Geocoder |
地理編碼與逆地理編碼服務,提供地址與座標間的相互轉換 |
AMap.CitySearch |
城市獲取服務,獲取用戶所在城市信息或根據給定IP參數查詢城市信息 |
AMap.IndoorMap |
室內地圖,用於在地圖中顯示室內地圖 |
AMap.MouseTool |
鼠標工具插件 |
AMap.CircleEditor |
圓編輯插件 |
AMap.PolyEditor |
折線、多邊形編輯插件 |
AMap.MarkerClusterer |
點聚合插件 |
AMap.RangingTool |
測距插件,能夠用距離或面積測量 |
AMap.CloudDataLayer |
雲圖圖層,用於展現雲圖信息 |
AMap.CloudDataSearch |
雲圖搜索服務,根據關鍵字搜索雲圖點信息 |
AMap.Weather |
天氣預報插件,用於獲取將來的天氣信息 |
AMap.RoadInfoSearch |
道路信息查詢,已中止數據更新,反饋信息僅供參考 |
AMap.Hotspot |
熱點插件,地圖熱點已默認開啓,不用手動添加,由Map的 |
AMap.Heatmap |
熱力圖插件
|
使用 JS API 開發以前有幾個基礎類型須要瞭解一下,包括:
經緯度的有效範圍爲經度-180
度到+180
度,緯度大約-85
度到+85
度。
JS API 支持的經緯度的寫法有兩種,使用時經度在前,緯度在後
,推薦使用標準寫法:
var position = new AMap.LngLat(116, 39);//標準寫法 var position = [116, 39]; //簡寫 var map = new AMap.Center('conatiner',{ center:position })
使用經緯度類型能夠進行一些簡單的位置計算,好比點與點、點與線的距離,根據距離差計算另外一個經緯度等
var lnglat1 = new AMap.LngLat(116, 39); var lnglat2 = new AMap.LngLat(117, 39); var distance = lnglat1.distance(lnglat2);//計算lnglat1到lnglat2之間的實際距離(m) var lnglat3 = lnglat1.offset(100,50)//lnglat1向東100m,向北50m的位置的經緯度
特別說明:
高德地圖採用 GCJ-02 座標系,即火星座標系。與 GPS 座標系,即 WGS-84 座標系存在必定的偏移量,若是您採集到的座標數據爲GPS座標,能夠先經過AMap.ConvertFrom
進行座標偏移後進行製圖或者使用,纔可以和高德的底圖徹底匹配。
像素點由x
和y
兩個份量組成,一般用來描述地圖的容器座標、地理像素座標 (平面像素座標)、點標記和信息窗體的的錨點等。使用方式以下:
var offset = new AMap.Pixel(-16,-30); var marker = new AMap.Marker({ offset:offset, icon:'xxx.png', }); map.add(marker);
像素尺寸由width
和height
兩個份量構成,一般用來描述具備必定大小的對象,好比地圖的尺寸,圖標的尺寸等
var mapSize = map.getSize();//獲取地圖大小,返回的是地圖容器的像素大小 var width = mapSize.width; var height = mapSize.height; var marker = new AMap.Marker({ position: [116.405467, 39.907761], icon: new AMap.Icon({ size: new AMap.Size(40, 50), //圖標的大小 image: "https://webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png", imageOffset: new AMap.Pixel(0, -60) }) }); map.add(marker)
經緯度矩形邊界爲一個矩形的經緯度範圍,用西南角和東北角的兩個經緯度來描述,這兩個經緯度分別表明邊界的最小值和最大值。矩形經緯度邊界一般用來描述:地圖的當前邊界、覆蓋物的外包矩形邊界、圖片圖層的覆蓋範圍等。好比構造一個新的Bounds對象來調成地圖的邊界範圍:
var southWest = new AMap.LngLat(110,20); var northEast = new AMap.LngLat(120,30); var bounds = new AMap.Bounds(southWest, northEast); map.setBounds(bounds);
3D視圖下,因爲地圖的傾斜和旋轉,因爲地圖邊界已經不在是矩形邊界,咱們提供了ArrayBounds
來描述地圖當前視口的邊界範圍,它使用一組經緯度路徑來表述一個閉合的區域邊界。ArrayBounds
提供了contains
方法可用來判斷經緯度點是否在其內部。
var map = new AMap.Map('container',{ zoom:17, viewMode:'3D' }) var arrayBounds = map.getBounds(); var path = arrayBounds.bounds//經緯度的路徑 var isPointInBounds = arrayBounds.contains(new AMap.LngLat(116, 39))//判斷點是否在邊界內
地圖狀態包括地圖中心點、縮放級別等內容。本章爲您介紹設置 / 獲取地圖狀態的經常使用方法,包括
// 傳入經緯度,設置地圖中心點
var position = new AMap.LngLat(116, 39); // 標準寫法
// 簡寫 var position = [116, 39];
map.setCenter(position);
// 獲取地圖中心點
var currentCenter = map.getCenter();
// 設置地圖級別,級別爲數字。 // PC上,參數zoom可設範圍:[3,18]; // 移動端:參數zoom可設範圍:[3,19] map.setZoom(13);
// 獲取地圖級別 var currentZoom = map.getZoom();
map.setZoomAndCenter(14, [116.205467, 39.907761]);
地圖上覆蓋物較多的狀況下,若是須要保證全部覆蓋物都在視野範圍內, 須要將地圖調整到合適的縮放等級和中心點,咱們能夠調用setFitView()
方法,以實現該效果。
// 建立一條折線覆蓋物 var path = [ new AMap.LngLat("116.368904","39.913423"), new AMap.LngLat("116.382122","39.901176"), new AMap.LngLat("116.387271","39.912501"), new AMap.LngLat("116.398258","39.904600") ]; var polyline = new AMap.Polyline({ path: path, borderWeight: 2, // 線條寬度,默認爲 1 strokeColor: 'red', // 線條顏色 lineJoin: 'round' // 折線拐點鏈接處樣式 }); map.add(polyline); // 建立兩個點標記 var marker1 = new AMap.Marker({ position: new AMap.LngLat(117.39, 39.9), // 經緯度對象,如 new AMap.LngLat(116.39, 39.9); 也能夠是經緯度構成的一維數組[116.39, 39.9] title: '北京' }); var marker2 = new AMap.Marker({ position: new AMap.LngLat(118.39, 39.9), // 經緯度對象,如 new AMap.LngLat(116.39, 39.9); 也能夠是經緯度構成的一維數組[116.39, 39.9] title: '北京' }); map.add(marker1); map.add(marker2); // 自動適配到合適視野範圍 // 無參數,默認包括全部覆蓋物的狀況 map.setFitView(); // 傳入覆蓋物數組,僅包括polyline和marker1的狀況 map.setFitView([polyline,marker1]);
下表所列爲經常使用設置 / 獲取地圖狀態方法,更多詳情請查看Map類的所有方法
方法 |
說明 |
---|---|
getZoom( ) |
獲取當前地圖縮放級別,在PC上,默認取值範圍爲[3,18];在移動設備上,默認取值範圍爲[3-19]。3D地圖會返回浮點數,2D視圖爲整數。 |
setZoom(level:Number) |
設置地圖顯示的縮放級別,在PC上,參數zoom可設範圍:[3,18];在移動端:參數zoom可設範圍:[3,19]。3D地圖下,可將zoom設置爲浮點數。 |
getCenter( ) |
獲取地圖中心點經緯度座標值。 |
setCenter(position: LngLat) |
設置地圖顯示的中心點。 |
setZoomAndCenter(zoomLevel:Number,center:LngLat) |
地圖縮放至指定級別並以指定點爲地圖顯示中心點。 |
getBounds( ) |
獲取當前地圖視圖範圍。3D地圖下返回類型爲AMap.ArrayBounds,2D地圖下仍返回AMap.Bounds 。 |
setBounds(bound:Bounds) |
指定當前地圖顯示範圍,參數bounds爲指定的範圍。 |
getCity(callback:function(result)) |
獲取地圖中心點所在區域,回調函數返回對象屬性分別對應爲{省,市,區/縣}。 |
setCity(city:String,callback:Functon) |
按照行政區名稱或adcode來設置地圖顯示的中心點。行政區名稱支持中國、省、市、區/縣名稱,如遇重名的狀況,會按城市編碼表順序返回第一個。adcode請在城市編碼表中查詢。建議不要同時使用center/setCenter()和setCity(),如一塊兒使用程序將以setCity()做爲最後結果。 |
panTo(positon:LngLat) |
地圖中心點平移至指定點位置。 |
setStatus(status:Object) |
設置當前地圖顯示狀態,包括是否可鼠標拖拽移動地圖、地圖是否可縮放、地圖是否可旋轉(rotateEnable)、是否可雙擊放大地圖、是否能夠經過鍵盤控制地圖旋轉(keyboardEnable)等。
|
覆蓋物有多種類型,包括點標記、矢量圖形、信息窗體等,都可以使用add
方法添加。
// 構造點標記 var marker = new AMap.Marker({ icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", position: [116.405467, 39.907761] }); // 構造矢量圓形 var circle = new AMap.Circle({ center: new AMap.LngLat("116.403322", "39.920255"), // 圓心位置 radius: 1000, //半徑 strokeColor: "#F33", //線顏色 strokeOpacity: 1, //線透明度 strokeWeight: 3, //線粗細度 fillColor: "#ee2200", //填充顏色 fillOpacity: 0.35 //填充透明度 }); // 將以上覆蓋物添加到地圖上 // 單獨將點標記添加到地圖上 map.add(marker); // add方法能夠傳入一個覆蓋物數組,將點標記和矢量圓同時添加到地圖上 map.add([marker,circle]);
可使用getAllOverlays(type)
方法獲取已經添加的覆蓋物。其中type參數類型包括marker、circle、polyline、polygon,缺省是返回以上全部類型全部覆蓋物。
// 獲取已經添加的覆蓋物 map.getAllOverlays(); // 獲取已經添加的marker map.getAllOverlays('marker');
// 使用remove方法移除覆蓋物,參數能夠爲單個覆蓋物對象,也能夠是一個包括多個覆蓋物的數組 // 單獨移除點標記 map.remove(marker); // 同時移除點標記和矢量圓形 map.remove([marker,circle]); // 使用clearMap方法刪除全部覆蓋物 map.clearMap();
地圖事件是對 Map 底圖操做後觸發的事件,事件回調中返回 MapsEvent
對象。該對象包含觸發的對象目標、觸發所在經緯度等信息。
map.on('click', function(ev) { // 觸發事件的對象 var target = ev.target; // 觸發事件的地理座標,AMap.LngLat 類型 var lnglat = ev.lnglat; // 觸發事件的像素座標,AMap.Pixel 類型 var pixel = ev.pixel; // 觸發事件類型 var type = ev.type; });
// 建立一個 Marker 實例: var marker = new AMap.Marker({ position: new AMap.LngLat(116.39, 39.9), // 經緯度對象,也能夠是經緯度構成的一維數組[116.39, 39.9] title: '北京' }); // 將建立的點標記添加到已有的地圖實例: map.add(marker); // 移除已建立的 marker map.remove(marker);
也能夠一次添加多個點標記到地圖實例(其它覆蓋物都可使用此方式):
// 多個點實例組成的數組 var markerList = [marker1, marker2, marker3]; map.add(markerList);
自定義圖標標記
如須要自定義點標記內容,能夠在建立 Marker 實例的時候,設置 icon 參數來實現。具體可經過如下兩種方式:
1. 爲建立的 Marker 指定自定義圖標 URL :
var marker = new AMap.Marker({ position: new AMap.LngLat(116.39,39.9), offset: new AMap.Pixel(-10, -10), icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 圖標 URL title: '北京' }); map.add(marker);
2. 爲建立的 Marker 指定 Icon 實例。此種方式能夠設置圖標大小,偏移等屬性,比單純設置 URL 更加靈活。建立方式以下
// 建立 AMap.Icon 實例: var icon = new AMap.Icon({ size: new AMap.Size(40, 50), // 圖標尺寸 image: '//webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png', // Icon的圖像 imageOffset: new AMap.Pixel(0, -60), // 圖像相對展現區域的偏移量,適於雪碧圖等 imageSize: new AMap.Size(40, 50) // 根據所設置的大小拉伸或壓縮圖片 }); // 將 Icon 實例添加到 marker 上: var marker = new AMap.Marker({ position: new AMap.LngLat(116.405467, 39.907761), offset: new AMap.Pixel(-10, -10), icon: icon, // 添加 Icon 實例 title: '北京', zoom: 13 }); map.add(marker);
或者向已建立好的 Marker 添加 Icon:
marker.setIcon(icon);
三. 自定義內容標記
對於更加複雜的 marker 展現,咱們可使用 Marker類 的 content 屬性。content 屬性取值爲用戶自定義的 DOM 節點或者 DOM 節點的 HTML 片斷。content 屬性比 icon 屬性更加靈活,設置了 content 之後會覆蓋 icon 屬性。具體實例以下:
var content = '<div class="marker-route marker-marker-bus-from"></div>'; var marker = new AMap.Marker({ content: content, // 自定義點標記覆蓋物內容 position: [116.397428, 39.90923], // 基點位置 offset: new AMap.Pixel(-17, -42) // 相對於基點的偏移位置 }); map.add(marker);
四. 自定義點標記的錨點位置
若是用戶自定義點標記內容,不管是自定義 Icon 仍是 自定義內容,都須要爲定義的圖片從新設置錨點位置。設置方法以下:
1.設置 anchor (自 v1.4.13 新增屬性)
經過 anchor 能夠方便的設置錨點方位。anchor 可選值有 'top-left'、'top-center'、'top-right'、'middle-left'、'center'、'middle-right'、'bottom-left'、'bottom-center'、'bottom-right' , 分別表明了點標記錨點的不一樣方位。
var marker = new AMap.Marker({ icon: '//a.amap.com/jsapi_demos/static/demo-center/marker/marker-bottom-left.png', // 自定義點標記 position: [116.418481,39.90833], // 基點位置 offset: new AMap.Pixel(0,0), // 設置點標記偏移量 anchor:'bottom-left', // 設置錨點方位 }); map.add(marker);
構造一個圓形覆蓋物,v1.4.3版本新增類。可直接知足建立圓形標註的須要。
AMap.CircleMarker 類與下一章介紹到的 AMap.Circle 類均爲在地圖上繪製圓形覆蓋物的方法。這兩類的根本不一樣在於 AMap.Circle 爲矢量圖形類,隨地圖的縮放會改變大小;而 AMap.CircleMarker 類則不會隨圖面縮放而改變。
純文本標記,v1.4.2版本新增類。文本標記的展現內容爲純文本。繼承自 Marker 類,具備 Marker 的大部分屬性、方法和事件。
點標記支持 click, mouseover 等多種事件。點標記事件的添加和移除和支持的全部事件類型,
清除全部的覆蓋物map.clearMap();