如何使用uniapp开发微信小程序获取当前位置详解

目录
  • 前言
  • 一、配置
    • 1、进入mainfest.json文件配置permission块
    • 2、进入微信公众平台添加合法域名
    • 3、高德SDK文件下载
  • 二、使用步骤 (直接封装组件)
    • 1.在组件中引入amap-wx.130.js文件
    • 2.在data中定义
    • 3.在created中定义
    • 4.在methods中定义
    • 5.在你需要使用的vue页面调用改组件
  • 总结

前言

  • 使用uniapp开发微信小程序时,多多少少会遇到获取当前位置的详细信息(比如:xxx省xxx市),uniapp提供了一个名为uni.getLocation()。仔细观察文档你就会发现,在success中只有经纬度信息,在app端success中才会有一个address字段(其中就包含详细的地址信息等)
  • 现在是微信小程序需要使用具体的位置信息怎么半?不得陷入沉思和骂***,废话不多说开整
  • 前提是,你的微信小程序具有定位功能,这个非常重要!!!

一、配置

1、进入mainfest.json文件配置permission块

意思就是进mainfestison里的微信小程序配置,勾选位置接口

2、进入微信公众平台添加合法域名

tip:尽量不要跳过,这一步跳过可能会出现在微信开发者工具预览小程序时能够获取到位置,但是在手机微信中预览小程序就获取失败

进入微信公众平台

进入当前开发的项目中 一一 开发 一一 开发管理 一一 开发设置 一一 服务器域名 一一 request合法域名 一一 添加域名

https://restapi.amap.com   //高德合法域名

3、高德SDK文件下载

高德SDK文件下载

在解压后可以获取到一个js文件 ( amap-wx.130.js ),并且将改文件存放在项目中的静态文件中

二、使用步骤 (直接封装组件)

1.在组件中引入amap-wx.130.js文件

代码如下(示例):

import amap from '@/static/js/amap-wx.130.js';

2.在data中定义

data() {
	return {
		amapPlugin: null,
		gaodekey: '386b29f376fca00a839e43060d0c829f', //高德key,此处的key需要去高德平台申请获取,此key是假的!!!
		address: "", // 已经获取到的位置
	}
}

3.在created中定义

created() {
	this.amapPlugin = new amap.AMapWX({
		key: this.gaodekey
	});
	this.getLocation();
},

4.在methods中定义

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"
            })
        }
    });
},

5.在你需要使用的vue页面调用改组件

// 调用组件
<position-infor @lodAddress="getLocation()"></position-infor>

methods(){
	// 页面加载就会触发
	getLocation(address){
    	// address就是组件传出的具体位置
    	console.log(address);
    	this.address = address;
	}
}

总结

实现此功能,你的微信小程序项目必须具有定位功能,没有的话还得去微信平台申请。二就是必须拥有一个高德的key,没有也需要申请。三就是需要借助高德的amap-wx.130.js文件,以上就是本人想说的所有东西~

到此这篇关于如何使用uniapp开发微信小程序获取当前位置的文章就介绍到这了,更多相关uniapp微信小程序获取当前位置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序之获取当前位置经纬度以及地图显示详解

    最近刚开始接触微信小程序,在弄懂其结构以及相关接口之后,准备着手实现一个小程序,功能包括--获取用户当前位置的经纬度,在地图上查看位置,通过地图获取不同位置的经纬度. 微信小程序的主体部分包括: 新增页面需要在app.json进行配置: "pages":[ "pages/index/index", "pages/location/location", "pages/logs/logs" ] 通过在视图层调用bindtap与逻辑

  • 微信小程序 获取当前地理位置和经纬度实例代码

    微信小程序实例-获取当前的地理位置.经纬度 微信小程序官方文档 https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html JS代码 //index.js //获取应用实例 var app = getApp() Page({ data: { motto: '示例小程序-获取当前地理位.速度', userInfo: {}, hasLocation:false, location:{} }, //事件处理函数 bindViewTap: fu

  • 微信小程序获取当前位置的详细步骤

    目录 1 腾讯位置开发基本步骤 1.1 申请开发者密钥(key) 1.2 下载微信小程序JavaScriptSDK 1.3 安全域名设置 1.4 微信小程序设置隐私权限 2 获取位置信息 3 权限问题 总结 微信小程序获取位置信息的方式有两种,一种是调用微信官方的接口来获取,如getLocation,这种方式只能获取经纬度微信官方文档 https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html

  • 使用微信小程序显示用户当前地理位置的详细代码

    目录 前言 wx.getLocation 腾讯位置服务 总结 前言 在微信小程序的开发中不可避免的会遇到需要显示用户地理位置的操作,本文将简单介绍如何在微信小程序中显示用户当前的地理位置. wx.getLocation 通过wx.getLocation我们得到用户的经纬度位置. 使用wx.getLocation之前需要简单的配置一下.因为获取用户地理位置的操作需要用户同意,所以我们在app.json文件里面加上配置: "permission": { "scope.userLo

  • 微信小程序获取当前位置和城市名

    1, 获取当前地理位置,首先要拿到用户的授权wx.openSetting: 2,微信的getLocation接口,获取当前用户的地理位置(微信返回的是经纬度,速度等参数): 3,微信没有将经纬度直接转换为地理位置,借用腾讯位置服务中关于微信小程序的地理转换JS SDK 的API(返回信息中包括国家,省,市,区,经纬度等地理位置) 步骤描述清楚以后,下面就开始按步骤操作了:(本文仅仅讲述如何获取用户地理位置的授权) 图示为获取用户地理位置授权弹窗 在用户首次进入某页面(需要地理位置授权)时候,在页

  • 如何使用uniapp开发微信小程序获取当前位置详解

    目录 前言 一.配置 1.进入mainfest.json文件配置permission块 2.进入微信公众平台添加合法域名 3.高德SDK文件下载 二.使用步骤 (直接封装组件) 1.在组件中引入amap-wx.130.js文件 2.在data中定义 3.在created中定义 4.在methods中定义 5.在你需要使用的vue页面调用改组件 总结 前言 使用uniapp开发微信小程序时,多多少少会遇到获取当前位置的详细信息(比如:xxx省xxx市),uniapp提供了一个名为uni.getLo

  • uni-app 开发微信小程序定位功能

    目录 一.注册账号 二.创建应用和Key 1.进入控制台 2.创建应用 3.创建Key 三.登录微信公众平台后台 四.下载微信小程序JavaScriptSDK 五.代码实现 六.一般获取经纬度地址 七.相对精确的获取经纬度地址 1.获取位置监听的权限 2.开启位置监听 3.监听实时地理位置变化 使用onLocationChange方法持续监听地址,根据定位精度字段判断是否使用此次定位的经纬度. 已经会定位的直接跳七.相对精确的获取经纬度地址 一.注册账号 把信息都输入就好了 腾讯位置服务 - 立

  • uniapp开发微信小程序自定义顶部导航栏功能实例

    目录 自定义导航栏渐变色,先上效果 重点来了,导航栏设置渐变色 补充:更换图标 总结 自定义导航栏渐变色,先上效果 使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色 全局定义导航栏 "window": { "navigationBarBackgroundColor": "#32A2FD", // 顶部背景颜色 "navigationBarTitleText

  • 微信小程序组件 marquee实例详解

    微信小程序组件 marquee实例详解 1. marquee标签 html是有marquee标签的,可以实现跑马灯效果,但小程序没有,所以要实现.这里考虑使用css3的animation实现. html的marquee是这样使用的. <marquee direction="left" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1"

  • 微信小程序 地图map实例详解

    微信小程序 地图map实例详解 wxml: class="button" bindtap="getlocation" style="margin-top:30px" markers="{{markers}}">定位 longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" co

  • 微信小程序 常用工具类详解及实例

    微信小程序 常用工具类详解 前言: 做微信小程序当中,会遇到好多的工具类util.js,这里记载下来以便平常使用 (Ps:建议通过目录查看) -获取日期(格式化) function formatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() var hour = date.getHours() var minute = date.getMinut

  • 微信小程序实现分页查询详解

    目录 创建自定义连接器 云开发介绍 分页实现思路 使用连接器 为什么要自定义分页功能 日常小程序经常需要分页查询的功能,本篇我们讲解一下低代码中如何实现分页查询的功能.要自己开发分页功能,可以先参考官方的方法 分页查询我们一般是需要有入参和出参,入参分别需要页码.每页大小.排序字段名称.排序方式.查询条件. 出参分别需要记录总条数.页码.每页大小.记录列表. 入参和出参知道之后,那在哪写代码呢?像分页这种功能一般属于后端的能力,低码工具中是在自定义连接器里写后端代码的. 创建自定义连接器 登录低

  • 微信小程序中input标签详解及简单实例

    微信小程序中input标签详解及简单实例 使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用: 我就用我最常用的来做例子: 一个一个来解读: 首先,我是定义了他的id,这是我们最常用的,所以就配了一个id,毕竟不操作他,又为什么设成输入框呢, 第二,设置他的样式, 第三,设置他的输入类别,以上都是很简单的 第四.使用正则l:哎限定输入为纯数字.这点可能有点不理解,这是对他的keyup事件监听,将不是纯数字的list无视掉.注意,是对

随机推荐