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

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

　　　　首先我们从百度平台申请百度地图的秘钥，申请成功后我们将<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘钥"></script>引入index.html，接下来就可以下面的操作了

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

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

　　　  

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

　　  　

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

　　代码：

 <template>
   <div>
     <div>{{LocationProvince}}</div>
     <div>{{LocationCity}}</div>
   </div>
 </template>

 <script>
 import BMap from 'BMap'
 export default{
     data(){
         return{
             LocationProvince:"正在定位所在省",    //给渲染层定义一个初始值
             LocationCity:"正在定位所在市"     //给渲染层定义一个初始值
         }
     },
     mounted(){
         this.city()    //触发获取城市方法
     },
     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.LocationProvince = province
                 _this.LocationCity = city
             }, function(e) {
                 _this.LocationCity = "定位失败"
             }, {provider: 'baidu'});
         }
     }
 }
 </script>

 <style scoped>
 </style>

　　　　　

　效果图：