一、百度地圖API的應用場景和方法
百度地圖接口有三種調(diào)用方式：
第一種是WEB瀏覽器端調(diào)用（H5）；
第二種是Android；
第三種是IOS；
附上文檔地址：
第一種當你調(diào)用API時會在瀏覽器端打開百度地圖頁面（Web和WebAPP打開后樣子不同），后兩種則是直接打開移動端的百度APP應用
以上三種調(diào)用方式其實都是通過調(diào)用百度地圖來展示你要的導航或路徑規(guī)劃；如果你想在自己的應用里面嵌入地圖或者類似百度地圖功能，有兩種方法：
第一種是利用百度javascript開發(fā)文檔；
附上文檔地址：http://lbsyun.baidu.com/index.php?title=jspopular；
第二種使用組件化的百度地圖，如果你使用VUE框架可以用 vue-baidu-map這個插件，適用于React，Angular的map組件我還沒研究，直接用npm安裝也行，script標簽引入也可以；
附上文檔地址：https://dafrok.github.io/vue-baidu-map/#/zh/index
不管以上那種方法，只要你想要調(diào)用百度地圖API，就必須登錄以下網(wǎng)址申請秘鑰ak：
https://passport.baidu.com/v2/?login&u=http%3A%2F%2Flbsyun.baidu.com%2Fapiconsole%2Fkey%3Fapplication%3Dkey
二、功能的實現(xiàn)

1.要改變百度地圖標注ICON圖標

var map =new BMap.Map('container');  
map.centerAndZoom(new BMap.Point(116.380797, 39.918497), 18);  //其中18是地圖放大的倍數(shù)
var icon = new BMap.Icon('pin.png', new BMap.Size(20, 32), {   //（20,30）是顯示圖標的范圍，這個尺寸最好就是圖標的大小，因為無法對圖標進行縮放操作
//此處的icon路徑必須是服務器上地址，不可以使用本地的圖片（我試了好多次用本地都不可以）
    anchor: new BMap.Size(10, 30)  //偏移量
});
var mkr =new BMap.Marker(new BMap.Point(116.38075,39.918986), {  //Marker是一個用來往地圖上添加點標記的類。
    icon: icon  //Marker的構(gòu)造函數(shù)的參數(shù)為Point和MarkerOptions（可選）
});  
map.addOverlay(mkr); 

其中 上面 anchor表示 即定位點距離圖片左上角的偏移量

// 向地圖添加標注
    for( var i = 0;i < points.length; i++){
        var myIcon = new BMap.Icon("http://7xic1p.com1.z0.glb.clouddn.com/markers.png", new BMap.Size(23, 25), {
            // 指定定位位置
            offset: new BMap.Size(10, 25),
            // 當需要從一幅較大的圖片中截取某部分作為標注圖標時，需要指定大圖的偏移位置   
            imageOffset: new BMap.Size(0, 0 - i * 25) // 設置圖片偏移  
        });
        var point = new BMap.Point(points[i][0],points[i][1]);
        // 創(chuàng)建標注對象并添加到地圖 
        var marker = new BMap.Marker(point,{icon: myIcon});
        map.addOverlay(marker);
    };

2.路徑規(guī)劃

目前百度沒有向外提供多目的地路徑規(guī)劃的接口，即多目的地的最優(yōu)路徑，現(xiàn)在百度API僅有兩點之間的路徑規(guī)劃。所以這個功能目前我還沒有找到實現(xiàn)方法。

3.關(guān)閉百度默認的POI信息點。

一開始接觸地圖，我都不曉得什么是POI，最后才知道是下圖的這個東東

image.png

var map = new BMap.Map("allmap", {enableMapClick:false});//構(gòu)造底圖時，關(guān)閉底圖可點功能

4.地址轉(zhuǎn)碼

WGS84：為一種大地坐標系，也是目前廣泛使用的GPS全球衛(wèi)星定位系統(tǒng)使用的坐標系。
GCJ02：又稱火星坐標系，是由中國國家測繪局制訂的地理信息系統(tǒng)的坐標系統(tǒng)。由WGS84坐標系經(jīng)加密后的坐標系。
BD09：為百度坐標系，在GCJ02坐標系基礎(chǔ)上再次加密。其中bd09ll表示百度經(jīng)緯度坐標，bd09mc表示百度墨卡托米制坐標。
非中國地區(qū)地圖，服務坐標統(tǒng)一使用WGS84坐標。
如果你是用的手機自帶GPS定位，則使用WGS84坐標，而百度對外接口的坐標系為BD09坐標系，所以如果你調(diào)用的是手機GPS定位，又想讓其顯示在百度地圖上，那么必須先將原始坐標轉(zhuǎn)化成百度地圖的坐標。
參見例子：http://lbsyun.baidu.com/jsdemo.htm#a5_2

5.定位

由于不是正式的app形式，只能通過html5的地理定位方法去獲取。html5 geolocation 特性可以實現(xiàn)瀏覽器定位，百度API對其進行了封裝，代碼如下：

var geolocation = new BMap.Geolocation(); //實例化瀏覽器定位對象。
    geolocation.getCurrentPosition(function(r) {
        if(this.getStatus() == BMAP_STATUS_SUCCESS) {
        var mk = new BMap.Marker(r.point);
            getAddress(r.point);
        } else {
            alert('failed' + this.getStatus());
        }
    });
    //獲取地址信息，設置地址label
    function getAddress(point) {
        var gc = new BMap.Geocoder();
        gc.getLocation(point, function(rs) {
            console.log(point)
        var addComp = rs.addressComponents;
            var address = addComp.province + addComp.city + addComp.district + addComp.street +           addComp.streetNumber; //獲取地址
      //console.log(addComp.province + addComp.city);

      });
}
//關(guān)于狀態(tài)碼

//BMAP_STATUS_SUCCESS
檢索成功。對應數(shù)值“0”。

//BMAP_STATUS_CITY_LIST
城市列表。對應數(shù)值“1”。

//BMAP_STATUS_UNKNOWN_LOCATION
位置結(jié)果未知。對應數(shù)值“2”。

//BMAP_STATUS_UNKNOWN_ROUTE
導航結(jié)果未知。對應數(shù)值“3”。

//BMAP_STATUS_INVALID_KEY
非法密鑰。對應數(shù)值“4”。

//BMAP_STATUS_INVALID_REQUEST
非法請求。對應數(shù)值“5”。

//BMAP_STATUS_PERMISSION_DENIED
沒有權(quán)限。對應數(shù)值“6”。(自 1.1 新增)

//BMAP_STATUS_SERVICE_UNAVAILABLE
服務不可用。對應數(shù)值“7”。(自 1.1 新增)

//BMAP_STATUS_TIMEOUT
超時。對應數(shù)值“8”。(自 1.1 新增)

6.添加信息窗口

vue中使用采用全局注冊
全局注冊將一次性引入百度地圖組件庫的所有組件,然后在各個頁面可以直接使用

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
// ak 是在百度地圖開發(fā)者平臺申請的密鑰 詳見 http://lbsyun.baidu.com/apiconsole/key */
ak: 'YOUR_APP_KEY'
})

<baidu-map class="map" :center=center :zoom="15">
    <bm-marker :position=center animation="BMAP_ANIMATION_BOUNCE"  @click="infoWindowOpen">
      <bm-info-window :position=center :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen">
          <div>
            <ul class="list" v-show="point.deviceType == 1">
                <li ><i>開合狀態(tài):{{point.angle_1 | angle_1Fil}}</i></li>
              <li ><i>電壓量:{{point.battery}}V</i></li>
              </ul>         
          </div>
      </bm-info-window>
  </bm-marker>
</baidu-map>

//methods:
infoWindowClose(e) {
    this.infoWindow.show = false
},
infoWindowOpen(e) {
    this.infoWindow.show = true
},

JS API :下面代碼為多點添加信息窗體

let map = new BMap.Map("amap");
let point = new BMap.Point(this.points[0].lng, this.points[0].lat);
map.centerAndZoom(point, 15);
let pointArray = new Array();
for(let i=0;i<this.points.length;i++){
    let imgUrl = "http://*********/img/"+this.points[i].imgUrl;
    let myIcon =  new BMap.Icon(imgUrl, new BMap.Size(100, 100), {  
          //offset: new BMap.Size(10, 25), // 指定定位位置  一般只有icon圖片為雪碧圖時用到
         // imageOffset: new BMap.Size(0, 0 - 10 * 25) // 設置圖片偏移  
         });  
        let marker = new BMap.Marker(new BMap.Point(this.points[i].lng, this.points[i].lat),{icon:myIcon}); // 創(chuàng)建點
        // 創(chuàng)建信息窗口對象
        addClickHandler(this.points[i],marker);
        map.addOverlay(marker);    //增加點
        pointArray[i] = new BMap.Point(this.points[i].lng, this.points[i].lat);
        marker.addEventListener("click",attribute);
}
//讓所有點在視野范圍內(nèi)
map.setViewport(pointArray);
//獲取覆蓋物位置
function attribute(e){
    var p = e.target;
    //alert("marker的位置是" + p.getPosition().lng + "," + p.getPosition().lat);    
}   
function addClickHandler(content,marker){
    marker.addEventListener("click",function(e){
        openInfo(content,e)}
    );
}
function openInfo(content,e){
    var p = e.target;
    var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
    var sContent ='<div>'
        +'<ul class="list">'
        +'<li style="width: 4.3rem;height: 0.78rem;line-height: 0.78rem;border-bottom: 1px solid #ccc;"><i>開合狀態(tài):' + status + '</i></li>'
        +'</ul>'
        +'</div>';
    var infoWindow = new BMap.InfoWindow(sContent); // 創(chuàng)建信息窗口對象 
    map.openInfoWindow(infoWindow,point); //開啟信息窗口
}
  

7.查詢兩點間路徑并進行導航

a.原生APP則可以直接調(diào)起百度地圖APP來實現(xiàn);
參見文檔：http://lbsyun.baidu.com/index.php?title=uri/api/android
b.WebAPP則可以調(diào)起瀏覽器百度API實現(xiàn)，

http://api.map.baidu.com/direction?origin=latlng:34.264642646862,108.95108518068|name:我家&destination=大雁塔&mode=driving&region=西安&output=html&src=yourCompanyName|yourAppName
//調(diào)起百度PC或Web地圖，展示"西安市"從（lat:34.264642646862,lng:108.95108518068 ）"我家"到"大雁塔"的駕車路線。

其中目的地也可以用經(jīng)緯度描述，類同origin;region參數(shù)也必須要有