Vue之获取用户当前所在省市

　　今天小编给大家带来的是使用Vue获取用户所在城市，Vue是很强大的，给大家准备好现成的插件供大家调用，下面的Demo小编使用的是百度API。

　　　　首先我们从百度平台申请百度地图的秘钥，申请成功后我们将引入index.html，接下来就可以下面的操作了

　　　　其实很简单，首先我们使用npm install bmap下载百度地图的插件。

　　　　下载好后在所需要用到的组件里调用就好了：

　　　  

 

　　　  接下来就是获取省市的方法：

　　  　

 

　　这样我们就可以获取到用户的地理位置了，下面是完整的代码和效果图！！！！

　　代码：

 1 <template>
 2   <div>
 3     <div>{{LocationProvince}}div>
 4     <div>{{LocationCity}}div>
 5   div>
 6 template>
 7 
 8 <script>
 9 import BMap from 'BMap'
10 export default{
11     data(){
12         return{
13             LocationProvince:"正在定位所在省",    //给渲染层定义一个初始值
14             LocationCity:"正在定位所在市"     //给渲染层定义一个初始值
15         }
16     },
17     mounted(){
18         this.city()    //触发获取城市方法
19     },
20     methods:{
21         city(){    //定义获取城市方法
22             const geolocation = new BMap.Geolocation();
23             var _this = this
24             geolocation.getCurrentPosition(function getinfo(position){
25                 let city = position.address.city;             //获取城市信息
26                 let province = position.address.province;     //获取省份信息
27                 _this.LocationProvince = province
28                 _this.LocationCity = city
29             }, function(e) {
30                 _this.LocationCity = "定位失败"
31             }, {provider: 'baidu'});        
32         }
33     }
34 }
35 script>
36 
37 <style scoped>
38 style>

　　　　　

　效果图：