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>

　　　　　

　效果图：