Vue之获取用户当前所在省市 |
您所在的位置：网站首页 › vue获取当前地理位置 › Vue之获取用户当前所在省市 |
Vue之获取用户当前所在省市
|
今天小编给大家带来的是使用Vue获取用户所在城市，Vue是很强大的，给大家准备好现成的插件供大家调用，下面的Demo小编使用的是百度API。 首先我们从百度平台申请百度地图的秘钥，申请成功后我们将引入index.html，接下来就可以下面的操作了 其实很简单，首先我们使用npm install bmap下载百度地图的插件。 下载好后在所需要用到的组件里调用就好了：
接下来就是获取省市的方法：
这样我们就可以获取到用户的地理位置了，下面是完整的代码和效果图！！！！ 代码： 1 2 3 {{LocationProvince}} 4 {{LocationCity}} 5 6 7 8 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 36 37 38
效果图：
|
【本文地址】
今日新闻 |
推荐新闻 |