(vue)h5 通过百度地图（原生） 获取当前位置

2021年中做的，
项目需求是：获取到当前城市定位，然后显示该城市的服务项

使用原生百度地图js,动态增加script标签，进行异步加载回调定位

百度的当前定位一开始加载 会弹出框问你能不能给定位，给与不给，返回的响应结果都是一样的，根本不像文档上的响应有区分

依稀记得获取当前定位真的很多坑，在使用百度、高德间来回切换，都有偏移，又加上嵌入app中，结果app设置不允许定位。
但是两者都商业收费了，公司买了高德的，所以要改为高德地图了点这里。

当时还是选择了百度地图，在定位精度上，高德差了点。（当时我哥在其他城市帮我反反复复测了很多次，直到能准确定位城市）

在public/index.html的head里引入

 <script src="https://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>
   
1
2

• 这个属性是引入index.html的cdn到项目里使用

configureWebpack:  {
 externals: {
     'BMap':"BMap",
    
    }
    }
1
2
3
4
5
6

• main文件
• 当时应该是请求出现了跨域问题

//引入jsonp跨域
import { VueJsonp } from 'vue-jsonp'   //注这里必须用{ }包裹否者会报错。
Vue.use(VueJsonp)
1
2
3

• 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);
    });
  }
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

• 引入封装的js

  import map from '@/plugins/baidumap'
1

• 最好开启一个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 }
          )
        })
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45