Vue中使用百度地图Vue Baidu Map —— 获取当前位置

敲代码的TKP

已于 2023-06-16 09:13:15 修改

阅读量7.6k

点赞数 2

分类专栏： vue 文章标签： vue.js javascript 百度

于 2021-12-08 16:47:44 首次发布

TKP

本文链接：https://blog.csdn.net/TKP666/article/details/121795166

版权

vue 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

这篇博客介绍了如何在Vue项目中集成并使用百度地图API进行定位。首先通过npm安装vue-baidu-map，然后在index.html引入地图JS，并在Vue组件中调用Geolocation获取当前位置。同时，定义了一个myBMap.js文件用于异步加载百度地图API并初始化。当定位成功时，可以获取到位置信息；若定位失败，则提示用户手动选择。

摘要由CSDN通过智能技术生成

1.npm 安装

cnpm install vue-baidu-map --save

2.引入及使用

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

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

然后再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;
          }
        });
      });
    },
}

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