JavaScript中怎么接入百度地圖API

這期內容當中小編將會給大家帶來有關JavaScript中怎么接入百度地圖API，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

一、百度地圖API接入

1、搜索百度地圖開發平臺

2、注冊百度賬號

3、登陸并申請成為開發者

4、在百度地圖開發平臺的首頁選擇控制臺，在控制臺中創建應用

創建好應用以后就能在控制臺我的應用中看到這個應用，其中最重要的是AK，這是百度地圖分配給我們應用的一個專用的秘鑰，必須使用秘鑰才能訪問百度地圖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、在網頁中定義一個DIV用于顯示地圖

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

3、在網頁中顯示地圖

基礎步驟：

var map = new BMapGL.Map("container");          // 創建地圖實例 
var point = new BMapGL.Point(116.404, 39.915);  // 通過地理位置的經緯度創建點坐標
map.centerAndZoom(point, 15);                 // 初始化地圖，設置中心點坐標和地圖級別

可選步驟：

map.centerAndZoom(point, 15);                   // 初始化地圖，設置中心點坐標和地圖級別
map.enableScrollWheelZoom(true);                //開啟鼠標滾輪縮放
map.setMapType(BMAP_EARTH_MAP);                 // 設置地圖類型為地球模式

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定位，當瀏覽器定位失敗時，會默認采用IP定位。瀏覽器定位更加精確，IP定位只能定位到大概位置。

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

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

6、添加地圖標記

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

7、給地圖標記添加點擊事件

 //給地圖添加點擊事件
map.addEventListener("click",function(e){
  //形參名稱e地圖點擊事件的事件源
  //console.log(e.latlng.lng+","+e.latlng.lat);
  var mk = new BMapGL.Marker(e.latlng);//創建標記,r是定位結果,r.point就是當前定位的地點
  mk.addEventListener("click",function(){//給標記添加點擊事件
    console.log(this);//this指代標記
    //由于標記屬于地圖對象map的子標簽，所以當我們點擊標記時，會出現冒泡，map的點擊事件也會觸發
    //可以使用事件源對象的stopPropagation函數組織后續的事件冒泡
    event.stopPropagation();
  });
  map.addOverlay(mk);//將標記對象添加到地圖上
})

8、添加信息窗口

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

9、路徑規劃

駕車路徑規劃

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

公交路徑規劃

//公交路徑規劃對象
//創建公交路徑規劃對象 一定在地圖加載出來以后再創建 一般放在創建好地圖對象map以后 而且一個網頁最好只能創建一次 否則將無法清除上一次的規劃路徑
transit = new BMapGL.TransitRoute(map, {
  renderOptions: { map: map },
  onSearchComplete: function (results) {
    if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
      return;
    }
    //alert(results.getNumPlans());//獲取公交規劃方案總數
    //在此處設計公交路徑規劃顯示的html模板
    var output = '';
    for(var i=0;i<results.getNumPlans();i++){
      var plan = results.getPlan(i);
      output +='<div ><p>總時長:'+plan.getDuration(true)+'</p>';//獲取時間
      output += '<p>總路程:'+plan.getDistance(true)+'</p>';  //獲取距離
      output +=plan.getDescription(true)+"</div>";
    }
    $('#result').css('display', 'block');//#result 是我們自己定義的一個div 絕對定位 先隱藏起來 路徑規劃成功顯示
    $('#result').html(output);// 將組裝好的路徑規劃HTML標簽模板放到#result div中顯示出來
  },
});
transit.clearResults();//清空上次規劃路徑
transit.search(startPoint, endPoint);//公交路徑規劃

10、正逆地址解析

根據經緯度查找位置

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

根據地理位置查詢經緯度坐標

//創建地址解析器實例
var myGeo = new BMapGL.Geocoder();
// 將地址解析結果顯示在地圖上，并調整地圖視野
myGeo.getPoint(地址字符串（重慶市紅旗河溝）, function(point){
    if(point){
        //point就是經緯度點
    }else{
        alert('您選擇的地址沒有解析到結果！');
    }
},可選參數)//可選參數傳入城市名稱 如果不傳則在全球范圍內查找 傳入城市名稱只在這個城市內查找

上述就是小編為大家分享的JavaScript中怎么接入百度地圖API了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。