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>

　　　　　

　效果圖：