vue基于百度地图获取位置信息

目的

在vue页面，基于百度地图获取访问当前H5页面用户的位置信息（经纬度）

1. 基于百度地图开放能力获取位置信息

1. 在工程目录下创建一个js文件（baiduLocation.js）,文件内容如下：

   /* * 加载地图
    * @param {Function} callback 回调函数名称，回调函数将会挂载到window上，例如：window.initBaiduMapScript，在方法中就能拿到BMap对象
    */
   export function loadBMap(callback) {
      var script = document.createElement('script')
      script.src = 'https://api.map.baidu.com/api?v=2.0&ak=你的AK信息&callback=' + callback
      document.body.appendChild(script)
   }

上述中，你的AK信息值通过注册百度地图开放平台账号获取

2. 在需要获取位置信息的页面引入,具体如下：

 <script>
    import { loadBMap } from "./baiduLocation.js";
    //页面加载后
    mounted(){
       var that = this;
       //定义回调函数 
       window.initBaiduMapScript = () => { 
           that.BMap = window.BMap;
           var geolocation = new that.BMap.Geolocation();
           geolocation.getCurrentPosition(function(r) {
               if (this.getStatus() == 0) {//成功获取位置信息
                   that.address = r;
                   console.dir(that.address);
               } else {//无法获取到位置信息
                   that.address = { latitude: "", longitude: "" };
               }
           },
           {
                enableHighAccuracy: true
           });
       };
        //调用脚本获取位置信息
        loadBMap("initBaiduMapScript");
    }, 
    data(){
        return{
            address: {} //经纬度信息
        }
    }
 </script>

说明：
1. 上述address对象即包含了经纬度信息
2. 该方式需要页面url为https，否则存在定位不准确。