使用uniapp获取当前位置

1、在获取定位之前需要申请开发者密钥 - - - - - -腾讯位置服务 - 立足生态，连接未来

2、在需要获取定位的项目文件夹中找到 manifest.json 文件 →→→ H5配置，输入申请的密钥

就可以开始实操了！上代码

<template><view><button type="default" @click="getCurrentLocation()">获取当前位置</button><button type="primary" @click="getaddress()">获取选择的位置</button><view style="color: red;">{{positionInfo.address}}</view></view>
</template><script>export default {data() {return {positionInfo: {address: '',longitude: '', //经度latitude: '', //纬度},}},methods: {// 通过自带的方法获取到当前的经纬度，调用方法获取到地址获取到地址的中文信息getCurrentLocation() {let that = this //在uniapp中药定义一下this才能使用uni.getLocation({type: 'wgs84',success: function(res) {console.log(res)that.positionInfo.longitude = res.longitude;that.positionInfo.latitude = res.latitude;that.loAcquire(that.positionInfo.longitude,         that.positionInfo.latitude)}});},// 获取当前地址loAcquire(longitude, latitude) {let that = this;uni.showLoading({title: '加载中',mask: true});let str = `output=jsonp&key='此处输入你申请的密钥'=${latitude},${longitude}` //记得在这里要输入密钥哦！this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1/?' + str, {}).then(res => {console.log(res);uni.hideLoading();if (res.status == 0) {that.positionInfo.address = '当前位置是:' + res.result.address_component.street_number; //当前定位}})},// 获取选择地址getaddress() {let that = thisuni.chooseLocation({success: function(res) {that.positionInfo.address = '选择的位置是：' + res.name}});},}}
</script><style scoped>button,view {margin: 20px;}
</style>

使用uniapp获取当前位置相关推荐

uni-app获取当前位置并计算出某个地点距离
实现思路:先通过 uni.getLocation 接口获取当前位置获取当前位置,再与点击经纬度进行计算得出相差距离. 1.获取当前位置需要先在manifest.json配置文件开启获取位置权限 // ...
uniapp获取当前位置（定位-经纬度及城市信息）
uniapp集成方法,跟小程序wx.getLocation不同,可直接获取经纬度及城市信息(当然你也可以先获取经纬度再解析成具体城市) uni.getLocation({type: 'wgs84',g ...
uniApp获取用户位置信息两种方法
1.使用uni.chooseLocation获取用户信息 uni.chooseLocation({success: (res) => {console.log('位置名称:' + res.nam ...
UNIAPP中腾讯地图选点组件和wx.getLocation配合使用，实现定位当前位置，并获取当前位置信息。
我是用地图选点组件和wx.getLocation()接口组合起来实现定位当前位置并获取当前位置信息进行使用,大致说一下自己的实现步骤. 写的虽然粗糙,但是纯纯干货啊兄弟!!! 腾讯位置服务申请key ...
uniapp开发获取用户位置信息功能解析
uniapp开发获取用户位置信息功能解析问题描述 uniapp相关接口 1.uni.authorize 提前向用户发起授权请求. 接口描述及demo演示 2.uni.getLocation 获取当前 ...
uni-app获取位置信息(经纬度转换地址信息)
uniapp获取位置信息,获取到的信息为经纬度,再通过转换成地址信息 1.使用uni.getLocation()获取位置信息 2.下载qqmap-wx-jssdk.js插件插件下载地址 3.使用腾讯位 ...
uniapp 获取到当前位置信息显示在地图上
上篇文章总结了获取当前位置信息的具体操作这一篇就总结一下选完位置之后在地图上显示出来老样子先看效果图 (对应/pages/positiondetails/positiondetails) 上一 ...
uniapp 开发微信小程序，通过高德SDK获取当位置详细信息
背景: 需求是需要获取到当前位置的详细信息(结构化地址(省/市/区/街道/门牌号)) 首先想到的是通过uni的getLocation() 获取当前位置,但是发现只能获取到经纬度坐标点,无法获取到结构化 ...
uniapp微信小程序获取当前位置信息、经纬度转换、导航地图实现
1.调用接口,官网文档是这样写的 uni.getLocation({type: 'wgs84',success: function (res) {console.log('当前位置的经度:' + re ...
uniapp 获取图片的高度_uni-app获取元素高度等信息，并设置元素top信息
本文主要简介uni-app获取元素信息及设置信息等获取元素高度可查看官方文档 mounted() { const query = uni.createSelectorQuery().in(this ...

使用uniapp获取当前位置

使用uniapp获取当前位置相关推荐

最新文章

热门文章