工作、生活節(jié)奏超快的今天，程序員想要不斷提升自我，下班后碎片化的學(xué)習(xí)必不可少，對技術(shù)的執(zhí)著在于精益求精！

學(xué)開發(fā)的小伙伴平時可能會涉及類似百度地圖應(yīng)用接口的調(diào)用，今天云和數(shù)據(jù)老師以JavaScript接入百度地圖API為例手把手教你精進(jìn)技術(shù)，解析底層原理，幫你查找問題、解決問題，包教包會哦~

一、百度地圖API接入

1、搜索百度地圖開發(fā)平臺

2、注冊百度賬號

3、登陸并申請成為開發(fā)者

4、在百度地圖開發(fā)平臺的首頁選擇控制臺，在控制臺中創(chuàng)建應(yīng)用

創(chuàng)建好應(yīng)用以后就能在控制臺我的應(yīng)用中看到這個應(yīng)用，其中最重要的是AK，這是百度地圖分配給我們應(yīng)用的一個專用的秘鑰，必須使用秘鑰才能訪問百度地圖API。

二、在HTML中使用百度地圖API

1、在HTML中引入百度地圖JS文件

<script type=”text/javascript” src=”http://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密鑰”></script>
將AK后的值替換為我們自己的秘鑰。

2、在網(wǎng)頁中定義一個DIV用于顯示地圖

顯示地圖的DIV一定要有id屬性。

3、在網(wǎng)頁中顯示地圖

基礎(chǔ)步驟：

var map = new BMapGL.Map(“container”); // 創(chuàng)建地圖實例 var point = new BMapGL.Point(116.404, 39.915); // 通過地理位置的經(jīng)緯度創(chuàng)建點坐標(biāo)map.centerAndZoom(point, 15); // 初始化地圖，設(shè)置中心點坐標(biāo)和地圖級別
可選步驟：

map.centerAndZoom(point, 15); // 初始化地圖，設(shè)置中心點坐標(biāo)和地圖級別map.enableScrollWheelZoom(true); //開啟鼠標(biāo)滾輪縮放map.setMapType(BMAP_EARTH_MAP); // 設(shè)置地圖類型為地球模式
4、添加可選控件

var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件map.addControl(scaleCtrl);var zoomCtrl = new BMapGL.ZoomControl(); // 添加縮放控件map.addControl(zoomCtrl);var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件map.addControl(cityCtrl);var locationControl = new BMapGL.LocationControl(); // 添加定位控件map.addControl(locationControl);
5、定位功能

百度地圖支持瀏覽器定位和IP定位，當(dāng)瀏覽器定位失敗時，會默認(rèn)采用IP定位。瀏覽器定位更加精確，IP定位只能定位到大概位置。

百度地圖自帶定位控件沒有使用IP定位

//獲取當(dāng)前地理位置 將地圖中心點移動到定位位置var geolocation = new BMapGL.Geolocation();//創(chuàng)建定位對象geolocation.getCurrentPosition(function (r) {//通過定位對象調(diào)用定位函數(shù),回調(diào)函數(shù)形參r表示定位結(jié)果 if (this.getStatus() == BMAP_STATUS_SUCCESS) {//如果定位成功 var mk = new BMapGL.Marker(r.point);//創(chuàng)建標(biāo)記,r是定位結(jié)果,r.point就是當(dāng)前定位的地點 map.addOverlay(mk);//將標(biāo)記對象添加到地圖上 map.panTo(r.point);//將地圖中心店移動到定位地點 // alert(‘您的位置：’ + r.point.lng + ‘,’ + r.point.lat); } else { alert(‘failed’ + this.getStatus()); }});
6、添加地圖標(biāo)記

//給地圖添加點擊事件map.addEventListener(“click”,function(e){ //形參名稱e地圖點擊事件的事件源 //console.log(e.latlng.lng+”,”+e.latlng.lat); var mk = new BMapGL.Marker(e.latlng);//創(chuàng)建標(biāo)記,r是定位結(jié)果,r.point就是當(dāng)前定位的地點 map.addOverlay(mk);//將標(biāo)記對象添加到地圖上})
7、給地圖標(biāo)記添加點擊事件

//給地圖添加點擊事件map.addEventListener(“click”,function(e){ //形參名稱e地圖點擊事件的事件源 //console.log(e.latlng.lng+”,”+e.latlng.lat); var mk = new BMapGL.Marker(e.latlng);//創(chuàng)建標(biāo)記,r是定位結(jié)果,r.point就是當(dāng)前定位的地點 mk.addEventListener(“click”,function(){//給標(biāo)記添加點擊事件 console.log(this);//this指代標(biāo)記 //由于標(biāo)記屬于地圖對象map的子標(biāo)簽，所以當(dāng)我們點擊標(biāo)記時，會出現(xiàn)冒泡，map的點擊事件也會觸發(fā) //可以使用事件源對象的stopPropagation函數(shù)組織后續(xù)的事件冒泡 event.stopPropagation(); }); map.addOverlay(mk);//將標(biāo)記對象添加到地圖上})
8、添加信息窗口

//添加信息窗口（封裝的函數(shù)）function addInfoWindow(content,point,width,height,title) { //必要參數(shù) content和point //content既可以是文本 也可以是標(biāo)簽 //point是經(jīng)緯度地理位置 //后面3個參數(shù)是可選的 var opts = { width: width, // 信息窗口寬度 height: height, // 信息窗口高度 title: title // 信息窗口標(biāo)題 } var infoWindow = new BMapGL.InfoWindow(content, opts); // 創(chuàng)建信息窗口對象 map.openInfoWindow(infoWindow, point); // 打開信息窗口}
9、路徑規(guī)劃

駕車路徑規(guī)劃

//駕車路徑規(guī)劃對象 //該對象一定在地圖加載出來以后再創(chuàng)建 一般放在創(chuàng)建好地圖對象map以后 而且一個網(wǎng)頁最好只能創(chuàng)建一次 否則將無法清除上一次的規(guī)劃路徑driving = new BMapGL.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } });//使用路徑規(guī)劃對象 查找路線driving.clearResults();//從地圖上清空上一次的規(guī)劃路徑driving.search(startPoint, endPoint);//開始路徑規(guī)劃,傳入開始點和結(jié)束點
公交路徑規(guī)劃

//公交路徑規(guī)劃對象//創(chuàng)建公交路徑規(guī)劃對象 一定在地圖加載出來以后再創(chuàng)建 一般放在創(chuàng)建好地圖對象map以后 而且一個網(wǎng)頁最好只能創(chuàng)建一次 否則將無法清除上一次的規(guī)劃路徑transit = new BMapGL.TransitRoute(map, { renderOptions: { map: map }, onSearchComplete: function (results) { if (transit.getStatus() != BMAP_STATUS_SUCCESS) { return; } //alert(results.getNumPlans());//獲取公交規(guī)劃方案總數(shù) //在此處設(shè)計公交路徑規(guī)劃顯示的html模板 var output = ”; for(var i=0;i<results.getNumPlans();i++){ var plan = results.getPlan(i); output +='<div style=”margin-top:5px; background-color:#CCC”><p>總時長:’+plan.getDuration(true)+'</p>’;//獲取時間 output += ‘<p>總路程:’+plan.getDistance(true)+'</p>’; //獲取距離 output +=plan.getDescription(true)+”</div>”; } $(‘#result’).css(‘display’, ‘block’);//#result 是我們自己定義的一個div 絕對定位 先隱藏起來 路徑規(guī)劃成功顯示 $(‘#result’).html(output);// 將組裝好的路徑規(guī)劃HTML標(biāo)簽?zāi)０宸诺?result div中顯示出來 },});transit.clearResults();//清空上次規(guī)劃路徑transit.search(startPoint, endPoint);//公交路徑規(guī)劃
10、正逆地址解析

根據(jù)經(jīng)緯度查找位置

// 創(chuàng)建地理編碼實例 var myGeo = new BMapGL.Geocoder(); // 根據(jù)坐標(biāo)得到地址描述 myGeo.getLocation(經(jīng)緯度坐標(biāo)點, function(result){ //funcation是一個回調(diào)函數(shù) 該回調(diào)函數(shù)在查找到了具體的地理信息之后才執(zhí)行 if (result){ alert(result.address); } });
根據(jù)地理位置查詢經(jīng)緯度坐標(biāo)

//創(chuàng)建地址解析器實例var myGeo = new BMapGL.Geocoder();// 將地址解析結(jié)果顯示在地圖上，并調(diào)整地圖視野myGeo.getPoint(地址字符串（重慶市紅旗河溝）, function(point){ if(point){ //point就是經(jīng)緯度點 }else{ alert(‘您選擇的地址沒有解析到結(jié)果！’); }},可選參數(shù))//可選參數(shù)傳入城市名稱 如果不傳則在全球范圍內(nèi)查找 傳入城市名稱只在這個城市內(nèi)查找
更多干貨可持續(xù)關(guān)注“云和數(shù)據(jù)”，不定時分享Java開發(fā)、Web前端、游戲開發(fā)、UI設(shè)計等技術(shù)干貨哦！帶你輕松學(xué)技術(shù)