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

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

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

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

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

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

在public/index.html的head里引入

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

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

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
  import map from '@/plugins/baidumap'
  • 最好开启一个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 }
          )
        })
      },

你可能感兴趣的:(vue,JS,baidumap,vue.js,javascript,百度地图)