vue 获取当前登录用户的地址（城市）_vue获取当前登录地点(1)

最新推荐文章于 2025-06-15 15:41:46 发布

原创

最新推荐文章于 2025-06-15 15:41:46 发布 · 706 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍如何在Vue应用中获取当前登录用户的地理位置信息，包括在vue.config.js中配置Bmap依赖，以及如何在Vue组件中使用。文章结尾提供了一个交流QQ群，分享前端面试准备建议和学习资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在自己想要得到信息的vue中
定义渲染属性

data () {
    return {
       LocationPCity: "",    //正在定位所在省 + 市
    }
}

Bmap依赖请引入：

yarn add bmap 
或者 npm install bmap

在vue.config.js: 加上这句

    externals:{
      'BMap': 'BMap' // 百度地图获取城市
    }

然后重新启动项目

methods:{
   //定义获取城市方法
    city(){
      const geolocation = new BMap.Geolocation();
      var _this = this
      geolocation.getCurrentPosition(function getinfo(position){
        let city = position.address.city;             //获取城市信息
        let province = position.address.province;     //获取省份信息
        _this.LocationPCity = province + ' '  + city
        console.log("LocationPCity:", _this.LocationPCity, position)
      }, function(e) {
        _this.LocationPCity = "定位失败"
      }, {provider: 'baidu'});
    },
 }