JavaScript接入百度地圖API的方法步驟

阿新 • • 發佈：2021-07-07

一、百度地圖API接入

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

2、註冊百度賬號

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

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

建立好應用以後就能在控制檯我的應用中看到這個應用，其中最重要的是AK，這是百度地圖分配給我們應用的一個專用的祕鑰，必須使用祕鑰才能訪問百度地圖API。

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

1、在html中引入百度地圖js檔案

<script type="text/" src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的金鑰"></script>

將ak後的值替換為我們自己的祕鑰。http://www.cppcns.com

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 http://www.cppcns.commk = 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.point就是當前定位的地點
  map.addOverlay(mk);//將標記物件新增到地圖上
})

7、給地圖示記新增點選事件

 //給地圖新增點選事件
map.addEventListener("click",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() www.cppcns.com!= BMAP_STATUS_SUCCESS) {
      return;
    }
    //alert(results.getNumPlans());//獲取公交規劃方案總數
    //在此處設計公交路徑規劃顯示的html模板
    var output = '';
    for(www.cppcns.comvar 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').('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('您選擇的地址沒有解析到結果！');
    }
},可選引數)//可選引數傳入城市名稱 如果不傳則在全球範圍內查詢 傳入城市名稱只在這個城市內查詢

到此這篇關於Script接入百度地圖API的方法步驟的文章就介紹到這了,更多相關JavaScript接入百度地圖內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！