iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >uni-app 开发微信小程序定位功能
  • 523
分享到

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

2024-04-02 19:04:59 523人浏览 独家记忆
摘要

目录一、注册账号二、创建应用和Key1.进入控制台2.创建应用3.创建Key三、登录微信公众平台后台四、下载微信小程序javascriptSDK五、代码实现六、一般获取经纬度地址七、

使用onLocationChange方法持续监听地址,根据定位精度字段判断是否使用此次定位的经纬度。

已经会定位的直接跳七、相对精确的获取经纬度地址

一、注册账号

把信息都输入就好了

腾讯位置服务 - 立足生态,连接未来

二、创建应用和Key

1.进入控制台

2.创建应用

3.创建Key

启用产品勾选WEBServiceapi和微信小程序,填写相应信息。

三、登录微信公众平台后台

增加request合法域名:https://apis.map.qq.com

开发管理 —— 开发设置 —— 服务器域名 ——修改

四、下载微信小程序JavaScriptSDK

下载后放到自己的项目

微信小程序JavaScript SDK | 腾讯位置服务

五、代码实现

var QQMap = require('../../js_sdk/qqmap-wx-jssdk.min.js') // SDK放置的路径
var qqmapsdk = new QQMap({
	key: '**************' // 自己的Key
});

六、一般获取经纬度地址

在比较繁华的地方,一般用这个就够了。

wx.getLocation({
	type: 'wgs84',
	success: res => {
		console.log(res); //获取到经纬度值
		qqmapsdk.reverseGeocoder({ // 根据经纬度转化为地址
			location: {
				latitude: res.latitude,
				longitude: res.longitude
			},
			success: res => {
				console.log(res);								
			}
		})
	}
});

七、相对精确的获取经纬度地址

1.获取位置监听的权限

uni.authorize({
	scope: 'scope.userLocation',
	success(res) {
		console.log(res);
	}
})

2.开启位置监听

wx.startLocationUpdate({
	success: res => {
		console.log(res);
	},
	fail: res => {
		console.log(res);
		//在这里处理开启失败的业务逻辑
	}
})

3.监听实时地理位置变化

let index = 0;
const _locationChangeFn = function(res) {
	console.log('location change', res)
	index++;
	
	//res.accuracy 代表定位精度, 这里根据定位精度和定位次数进行一个综合判断,根据用户在当前页面的停留时间进行相应的修改
	if (index > 10 || (res.accuracy < 35 && index > 5)) {
 
 
		wx.offLocationChange();
		wx.stopLocationUpdate();
 
		qqmapsdk.reverseGeocoder({// 根据经纬度转化为地址
			location: {
				//纬度
				latitude: res.latitude,
				//经度
				longitude: res.longitude
			},
			success: function(res1) {
				console.log(res1.result);
				
			},
			fail: function(res1) {
				console.log(res1);
			}
		})
	}
 
}
 
//监听实时地理位置变化事件
wx.onLocationChange(_locationChangeFn)

这样定位出来的地址可能差不多,但是经纬度要比直接用getLocation获取到的更准确。

到此这篇关于uni-app 开发微信小程序定位的文章就介绍到这了,更多相关uni-app小程序定位内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: uni-app 开发微信小程序定位功能

本文链接: https://www.lsjlt.com/news/145523.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • uni-app 开发微信小程序定位功能
    目录一、注册账号二、创建应用和Key1.进入控制台2.创建应用3.创建Key三、登录微信公众平台后台四、下载微信小程序JavaScriptSDK五、代码实现六、一般获取经纬度地址七、...
    99+
    2024-04-02
  • uni-app开发 小程序直播功能
    uni-app开发小程序直播功能 1、微信后台申请插件开通 2、微信后台开通直播功能 3、代码中接入直播插件AppID 4、【直播组件】如何使用 5、直播组将状态获取 微信开发直播功能,需要企业账号; 需要申请直播功能和插件 1、...
    99+
    2023-08-20
    uni-app 小程序 微信 vue.js
  • 微信小程序使用uni-app开发小程序及部分功能实现详解
    目录一、uni-app1、简介2、开发工具3、新建 uni-app项目4、把项目运行到微信开发者工具二、实现tabBar效果1、创建tabBar页面2、配置tabBar三、配置网络请...
    99+
    2022-11-13
    uniapp开发小程序 uniapp和原生小程序混合开发 使用uniapp开发微信小程序
  • 微信小程序使用uni-app开发小程序及部分功能实现详解心得
    目录 一、uni-app 1、简介 2、开发工具 3、新建 uni-app项目 4、把项目运行到微信开发者工具 二、实现tabBar效果 1、创建tabBar页面 2、配置tabBar 1、创建分包目录 2、在 pages.json 文件...
    99+
    2023-09-04
    小程序 uni-app 微信小程序
  • uni-app实现微信小程序长按拍视频功能
    本文实例为大家分享了uni-app实现微信小程序长按拍视频功能的具体代码,供大家参考,具体内容如下 html <!-- 上传视频 -->      <view cl...
    99+
    2024-04-02
  • 如何使用uni-app进行微信小程序云开发
    这篇文章主要介绍了如何使用uni-app进行微信小程序云开发,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。使用微信开发者工具,创建一个云开发的项目,创建云函数并上传(此项目作...
    99+
    2023-06-03
  • 如何使用PHP开发微信小程序的地图定位功能?
    如何使用PHP开发微信小程序的地图定位功能?微信小程序作为一种流行的应用程序开发框架,为开发者提供了丰富的功能和工具,其中地图定位功能是常用的一项功能。本文将介绍如何使用PHP开发微信小程序的地图定位功能,并提供具体的代码示例。准备工作首先...
    99+
    2023-10-28
    PHP 微信小程序 地图定位
  • uni-app开发微信小程序遇到的部分踩坑实战
    目录一、组件设置全屏覆盖二、wx.onNetworkStatusChange、uni.onNetworkStatusChange网络状态监听不生效问题三、接口请求写在哪里好?(即返回...
    99+
    2023-02-08
    uni app开发小程序 uniapp 开发微信小程序 微信小程序开发例子
  • uni-app 使用webview加载H5打开微信小程序
    最近公司有个需求要求在app里点击一个功能打开小程序,并且关闭小程序回到app,模仿平安保险app。 毕竟我也是刚学习uni-app,找了很多资料,找到了一个天天外链的网站可以生成一个小程序的链接,使用uni的webview去加载这个链接,...
    99+
    2023-10-03
    微信小程序 uni-app 小程序
  • uni-app小程序实现微信在线聊天功能(私聊/群聊)
    目录聊天信息列表的渲染聊天信息发送的相关问题实现一对一聊天关于websocket建立连接存储连接的用户发送聊天信息 首页新消息提示实现群聊加入房间发送群消息之前学习使用un...
    99+
    2023-02-18
    uni-app小程序微信聊天 uni-app微信小程序聊天
  • 微信小程序如何开发微信支付功能
    本篇内容主要讲解“微信小程序如何开发微信支付功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序如何开发微信支付功能”吧!用户请求开发者后台,发起下单请求发起请求前在小程序端调用&nbs...
    99+
    2023-06-26
  • uni-app小程序分享功能实现
    1. 分享功能实现 通过onShareAppMessage(OBJECT) 将小程序到分享微信聊天,onShareTimeline()将小程序分享到朋友圈。 api中的参数配置参考文档:https://uniapp.dcloud.net.c...
    99+
    2023-08-16
    uni-app 小程序 javascript
  • 微信小程序如何自定义tabBar在uni-app的适配
    这篇文章给大家分享的是有关微信小程序如何自定义tabBar在uni-app的适配的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。要在微信小程序中,实现一个中间图标突出显示的异形导航...
    99+
    2024-04-02
  • 微信小程序会取代APP开发吗
    这篇文章主要介绍了微信小程序会取代APP开发吗,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。  常规来说,开发和运营一个APP的目的,在于能够便利的为客户提供一些丰富的服务,...
    99+
    2023-06-26
  • 【uni-app】uni-app实现聊天页面功能(小程序)——布局篇
    文章目录 前言划分区域问题内容溢出关于调试聊天框 代码实现 前言 在工作中使用uni-app参与开发一个小程序,其中要写一个简单的聊天页面,虽然功能不多(只有一个发送文字的功能),但是其中的细节比较多,也踩过很多坑,...
    99+
    2023-08-16
    uni-app 小程序 前端 vue.js
  • 使用微信小程序实现地图定位功能
    使用微信小程序实现地图定位功能微信小程序作为一种轻量级的应用程序,提供了丰富的能力,其中地图定位功能是许多小程序开发者常常需要使用的。本文将介绍如何使用微信小程序来实现地图定位功能,并给出具体的代码示例。一、准备工作在开始编写代码之前,我们...
    99+
    2023-11-21
    微信小程序 实现功能 地图定位
  • 微信小程序如何实现锚点定位功能
    这篇文章将为大家详细讲解有关微信小程序如何实现锚点定位功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。前言在小程序开发中,我们经常会遇到滚动列表查看的需求,那么使用锚点定位来实现可以达到交互体验更加友好...
    99+
    2023-06-20
  • uni-app小程序中实现分享功能
    在manifest.json文件中配置分享相关信息,包括分享标题、分享图片等。 代码如下: { "mp-weixin": { "appid": "yourAppId", "share": { "title": "分享...
    99+
    2023-10-20
    uni-app 小程序 服务器
  • 微信小程序怎么实现锚点定位功能
    这篇“微信小程序怎么实现锚点定位功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序怎么实现锚点定位功能”文章吧。实...
    99+
    2023-06-08
  • 微信小程序地图定位功能怎么实现
    本篇内容主要讲解“微信小程序地图定位功能怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序地图定位功能怎么实现”吧!方法如下首先呢你要有一个方法去触发这个点击事件,下面已经写好啦,...
    99+
    2023-06-30
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作