uniapp 实现定位到当前城市

uniapp 实现定位到当前城市

**

  1. 在uniapp 文档 uni.getLocation方法可以获取到当前位置 [https://uniapp.dcloud.io/api/location/location?id=getlocation]

  2. 在address地址信息说明 参数中的city 可以定位到当前城市,代码如下:
    location() { if (uni.getStorageSync('position') == '') { uni.getLocation({ geocode: true, type: 'wgs84', success: (res) => { console.log('位置是', res) var str = res.address.city this.position_index = str.slice(0, str.length - 1) // uni.setStorageSync('position', this.position_index) } }) } },

  3. 在HBuilder 运行时可以成功定位到当前城市,但是打包运行在app上面时定位就不出来了。

原因在哪里了?

  1. 在uniapp官方文档中的注意中写到:在这里插入图片描述
    HBuilder 自带了高德定位
    如果要配置Appkey,详见https://ask.dcloud.net.cn/article/29
    最后我采取的方法是用经纬度来转化城市
location() {
				var that = this
				var weidu = ''
				var jd = ''
				if (uni.getStorageSync('position') == '') {
					uni.getLocation({
						geocode: true,
						type: 'wgs84',
						success: (res) => {
							console.log('位置是', res)
							weidu = res.latitude
							jd = res.longitude
							uni.request({
								url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + weidu + ',' + jd + '&key=你自己在高德控制台申请的key&get_poi=0',
								success: function(res) {
									console.log('得到的信息是', res);
									console.log('当前位置的纬度3:' + weidu);
									console.log('当前位置的经度3:' + jd);
									var status = res.data.result.address_component.city
									var position = status.slice(0, status.length - 1)
									console.log('位置是顶呱呱', position)
									that.position_index = position
									uni.setStorageSync('position', that.position_index)
								}
							})
							// var str = res.address.city
							// this.position_index = str.slice(0, str.length - 1)
							// uni.setStorageSync('position', this.position_index)
						}
					})
				}

注意:

  1. key 是在高德控制台申请的key https://console.amap.com/dev/key/app
    2.location后面接的数值,用++拼接,不然拼接的就是字符串
    拼接的是数值:url: ‘https://apis.map.qq.com/ws/geocoder/v1/?location=’ + weidu + ‘,’ + jd + '&key…
    拼接字符串:url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=weidu,jd + '&key…
  • 3
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Uniapp(全称 Universal Application),是一个基于 Vue.js 开发的跨平台应用开发框架,它可以快速开发出可以同时运行在多种平台的应用程序,包括 H5、iOS 和 Android 等。 随着移动互联网的不断发展,城市选择列表插件成为了很多公司或者个人开发者必须要面对的问题之一。而在 Uniapp 中,城市列表选择插件的运用早已成为了趋势。城市列表选择功能不仅简化了用户在输入城市时的选择,而且可以减少用户的输入错误,为用户提高了使用效率。 城市列表选择插件可以通过搜索和定位的方式来实现城市的选择。搜索功能可以通过输入城市名称或者拼音的方式进行搜索,从而实现城市的精准选择。定位功能则可以通过定位设备所在的位置来自动为用户提供该位置附近的城市,使得用户可以更快速地选择到所需的城市。 在实现这种功能的过程中,我们可以使用 uniapp 自带的 picker 组件,结合城市数据来实现。 在实现 cityNameSearch 函数时,我们可以通过 ES6 的 filter API 进行筛选,从而过滤出符合条件的城市列表。需要注意的是,在这里我们需要将城市名称转换成小写,以方便搜索时的比较。 实现定位功能主要有两种方式:一种是通过 HTML5 提供的地理位置 API 获取当前设备绑定的位置信息,从而根据位置信息来确定的当前城市。另外一种则是通过调用第三方地图 API,通过经纬度等信息来获取当前所在城市。 总之,Uniapp 城市列表选择插件的运用为用户提供了便捷的城市选择方式,提高了用户的体验。随着移动互联网的不断普及和发展,城市列表选择插件必将变得越来越普及。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值