目录前言一、配置1、进入mainfest.JSON文件配置permission块2、进入微信公众平台添加合法域名3、高德SDK文件下载二、使用步骤 (直接封装组件)1.在组件中引入a
意思就是进mainfestison里的微信小程序配置,勾选位置接口
tip:尽量不要跳过,这一步跳过可能会出现在微信开发者工具预览小程序时能够获取到位置,但是在手机微信中预览小程序就获取失败
进入微信公众平台
进入当前开发的项目中 一一 开发 一一 开发管理 一一 开发设置 一一 服务器域名 一一 request合法域名 一一 添加域名
高德SDK文件下载
在解压后可以获取到一个js文件 ( amap-wx.130.js ),并且将改文件存放在项目中的静态文件中
代码如下(示例):
import amap from '@/static/js/amap-wx.130.js';
data() {
return {
amapPlugin: null,
gaodekey: '386b29f376fca00a839e43060d0c829f', //高德key,此处的key需要去高德平台申请获取,此key是假的!!!
address: "", // 已经获取到的位置
}
}
created() {
this.amapPlugin = new amap.AMapWX({
key: this.gaodekey
});
this.getLocation();
},
getLocation() {
const _this = this;
this.amapPlugin = new amap.AMapWX({
key: this.gaodekey
});
uni.showLoading({
title: '获取信息中'
});
// 成功获取位置
_this.amapPlugin.getRegeo({
success: (data) => {
console.log(data, '当前定位');
_this.address =`${data[0].regeocodeData.addressComponent.city}${data[0].regeocodeData.addressComponent.district}`;
// _this.address 可根据自己的实际情况修改
_this.address = `${data[0].regeocodeData.fORMatted_address}`;
// 传出
_this.$emit("lodAddress",_this.address)
uni.hideLoading();
},
// 获取位置失败
fail: (err) => {
uni.showToast({
title: "获取位置失败,请重启小程序",
icon: "error"
})
}
});
},
// 调用组件
<position-infor @lodAddress="getLocation()"></position-infor>
methods(){
// 页面加载就会触发
getLocation(address){
// address就是组件传出的具体位置
console.log(address);
this.address = address;
}
}
实现此功能,你的微信小程序项目必须具有定位功能,没有的话还得去微信平台申请。二就是必须拥有一个高德的key,没有也需要申请。三就是需要借助高德的amap-wx.130.js文件,以上就是本人想说的所有东西~
到此这篇关于如何使用uniapp开发微信小程序获取当前位置的文章就介绍到这了,更多相关uniapp微信小程序获取当前位置内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: 如何使用uniapp开发微信小程序获取当前位置详解
本文链接: https://www.lsjlt.com/news/169205.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0