(vue)h5 通過百度地圖（原生） 擷取目前位置

2021年中做的，

項目需求是：擷取到目前城市定位，然後顯示該城市的服務項

使用原生百度地圖js,動态增加script标簽，進行異步加載回調定位

百度的目前定位一開始加載 會彈出框問你能不能給定位，給與不給，傳回的響應結果都是一樣的，根本不像文檔上的響應有區分

依稀記得擷取目前定位真的很多坑，在使用百度、高德間來回切換，都有偏移，又加上嵌入app中，結果app設定不允許定位。

但是兩者都商業收費了，公司買了高德的，是以要改為高德地圖了點這裡。

當時還是選擇了百度地圖，在定位精度上，高德差了點。（當時我哥在其他城市幫我反反複複測了很多次，直到能準确定位城市）

在public/index.html的head裡引入

1.在public/index.html的head裡引入

2.在vue.config.js、module.exports加入

• 這個屬性是引入index.html的cdn到項目裡使用

configureWebpack:  {
 externals: {
     'BMap':"BMap",
    
    }
    }
           

3.引入會使用到的vue-jsonp

• main檔案
• 當時應該是請求出現了跨域問題

//引入jsonp跨域
import { VueJsonp } from 'vue-jsonp'   //注這裡必須用{ }包裹否者會報錯。
Vue.use(VueJsonp)
           

4.封裝了script腳本及異步回調處理

• url是地圖init傳進來的

export default {
  init: function (url,back){
    const AK = '你的sk';
    const BMap_URL = url+"&s=1&callback="+back;
    return new Promise((resolve, reject) => {
// 如果已加載直接傳回
      if(typeof BMap !== "undefined") {
        resolve(BMap);
        console.log(BMap)
        return true;
      }
// 百度地圖異步加載回調處理
      window.onBMapCallback1 = function () {
        resolve(BMap);
      };
      window.onBMapCallback2 = function () {
        resolve(BMap);
      };
      // let getCurrentCityName = function () {
      //   return new Promise(function (resolve, reject) {
      //     let myCity = new BMap.LocalCity()
      //     myCity.get(function (result) {
      //       resolve(result.name)
      //     })
      //   })
      // }
// 插入script腳本
      let scriptNode = document.createElement("script");
      scriptNode.setAttribute("type", "text/javascript");
      scriptNode.setAttribute("src", BMap_URL);
      document.body.appendChild(scriptNode);
    });
  }
}


           

5.正式在頁面調用

• 引入封裝的js

• 最好開啟一個loading動畫
• getCurrentPosition其實是h5定位方法
• 擷取到了大緻經緯度與城市，最好再一次進行逆位址編碼請求
• 逆位址編碼請求結果更詳細更确定城市位址。

getMap() {
        this.loadingStation = true
        let that = this
        let AK = '你的ak'
        let url = 'https://api.map.baidu.com/api?v=2.0&ak=' + AK
        let maps = map
        map.init(url, 'onBMapCallback1').then(BMap => {
          console.log(BMap)
          const locationCity = new BMap.Geolocation()
          const gc = new BMap.Geocoder()
          locationCity.enableSDKLocation()

          locationCity.getCurrentPosition(
            function (r) {
              let lat = r.latitude
              let lng = r.longitude
              let cityUrl =
                'https://api.map.baidu.com/reverse_geocoding/v3/?ak=你的ak&output=json&coordtype=wgs84ll&location=' +
                lat +
                ',' +
                lng
              that.$jsonp(cityUrl).then(res => {
                console.log('地圖請求'+res.result)
                //這個結果狀态碼status均傳回了成功，是以依靠result判空
                if (res.result !== {}) {
                 //擷取結果後處理
                  } else {
                    //未擷取定位
                  }
                } else {
                  that.initProvince()
                }
              })
            },
            function (e) {
              // alert("定位失敗")
              that.LocationCity = '定位失敗'
              that.getServiceType(0)

              // console.log('定位失敗')
            },
            { provider: 'baidu', enableHighAccuracy: true }
          )
        })
      },