Vue中使用百度地图Vue Baidu Map —— 获取当前位置_vue3中vue-baidu-map-3x获取当前位置

1.npm 安装

cnpm install vue-baidu-map --save
1

2.引入及使用

首先在public下的index.html里引入js

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=3s9RVp4wDTnCez3eBX3vjisaSlHyAWxE&services=false"></script>
1

然后再vue文件里引入

import myBMap from "../utils/myBMap";
created(){
	this.getLocation();
}
methods: {
    getLocation() {
      //Toast("如长时间未获取办理区域请手动选择");
      myBMap.init().then(() => {
        let that = this;
        let geolocation = new BMap.Geolocation(); 
        // 创建百度地理位置实例，代替 navigator.geolocation
        geolocation.getCurrentPosition(function (e) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            // 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
            let point = new BMap.Point(e.point.lng, e.point.lat);
            let gc = new BMap.Geocoder();
            gc.getLocation(point, function (rs) {
              console.log(rs);
              //<<<<<<<<<<<<<<<<需要的位置信息在这获取
            });
          } else {
            Toast("定位失败，请手动选择区域或重新定位");
            this.showloading = false;
          }
        });
      });
    },
}
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

3.myBMap.js文件中写入

export default {
    init: function () {
        const AK = '3s9RVp4wDTnCez3eBX3vjisaSlHyAWxE';  //你的AK
        const BMap_URL = "https://api.map.baidu.com/api?v=2.0&ak=" + 
        AK + "&s=1&callback=onBMapCallback";
        return new Promise((resolve, reject) => {
            // 如果已加载直接返回
            if (typeof BMap !== 'undefined') {
                resolve(BMap);
                return true;
            }
            // 百度地图异步加载回调处理
            window.onBMapCallback = 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