首页 > 编程语言 >微信小程序实现定位功能

微信小程序实现定位功能

时间:2024-08-22 16:28:00浏览次数:13  
标签:定位 console 程序实现 微信 longitude res latitude wx

分享两个微信小程序获取定位的办法,用的腾讯的地图,可根据自己的情况改动

前情提示:提前在您的app.json上加上这些代码

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于地图中定位"
    }
  }

这样才可以继续实现定位功能

第一种:wx.getLocation

附上代码

 GPSbtn() {
    let _this = this
    wx.getLocation({
      type: 'gcj02',
      altitude: true,
      isHighAccuracy: true,
      success: res => {
        console.log(res);
        const latitude = res.latitude //纬度
        const longitude = res.longitude //经度
        // 调用获取城市名称方法
        _this.getCity(latitude, longitude)
      }
    })
  },
  // 获取定位城市名称方法
  getCity: function (latitude, longitude) {
    wx.request({
      url: `https://apis.map.qq.com/ws/geocoder/v1/?key=腾讯地图申请的key&location=` + latitude + ',' + longitude,
      success: res => {
        console.log(res) // 此处返回的就是城市名称
        console.log(res.data.result.address);// 具体地址
      }
    })
  },

这是打印的值,大家可以参考一下

这个能返回一个稍微有点偏差的,我的偏差大概是在4公里这样,但是真机调试的时候没那么大。我也查阅了大量资料发现现在确实是有这个问题而且没有太好的解决办法,大家可以跟领导说一下这个问题,作为一个前端这些问题一定要及时反馈

第二种:wx.chooseLocation

附上代码

 // 定位
  GPSbtn() {
    wx.chooseLocation({
      type: 'wgs84',
      success: res => {
        console.log(res);
      }
    })
  },

大家可以看到这个定位代码很少,因为这个是微信之前推出可自选地址的一个定位,点击效果是这样的:

可以看到用户可以自己去选择地址,如果应用场景是打卡什么的就不建议用这种了,下面是控制台打印的内容

可以看到这个自选的地址还是很精准的,大家可以根据情况来选择适合自己的定位

最后附上微信官方文档的定位文章:位置 / wx.getLocation (qq.com)

标签:定位,console,程序实现,微信,longitude,res,latitude,wx
From: https://blog.csdn.net/yodoyskts/article/details/141431000

相关文章

  • 基于OFDM的通感一体化信号的定位CRLB推导
    本文的CRLB推导结果来源于文章CooperativeTrajectoryPlanningandResourceAllocationforUAV-EnabledIntegratedSensingandCommunicationSystems,引用格式:{YuPan,RuoguangLi*,XinyuDa,HangHu,MiaoZhang,DongZhai,KanapathippillaiCuman,andOctaviaA.......
  • 微信小程序echarts-饼状图
    为了兼容小程序Canvas,我们提供了一个小程序的组件,用这种方式可以方便地使用ECharts。首先,下载GitHub上的 ecomfe/echarts-for-weixin 项目。一、封装pieChart组件pieChart.wxml:<viewclass="container"><ec-canvasid="mychart-dom-bar"class='mychart-bar'can......
  • 微信答题小程序产品研发全流程
    明月别枝惊鹊,清风半夜鸣蝉。稻花香里说丰年,听取蛙声一片。我前面说过,我仿了一款答题小程序。现在,整理一下微信答题小程序产品研发全流程,分享给迈入或者深耕题库小程序这一领域的小伙伴。题库软件产品开发不仅仅是写代码这一环,它包含从需求调研、分析与构思、设计到开发、测试......
  • 【嵌入式裸机开发】智能家居入门7:最新ONENET,MQTT协议接入,最全最新(微信小程序、MQTT协
    智能家居入门7前言一、ONENET云平台创建产品与设备二、STM32端连接服务器前的准备三、STM32端实现四、微信小程序端连接服务器前的准备五、微信小程序端实现六、最终测试前言本篇文章介绍最新ONENET云平台的MQTT协议接入方法,在STM32上实现数据上云与服务器下发数据......
  • 基于微信小程序的宠物服务中心
    目录前言 一、技术栈二、系统功能介绍三、核心代码1、登录模块 2、文件上传模块3、代码封装前言疫情爆发以来,越来越多的用户借助于移动手机、电脑完成生活中的事务,许多的传统行业也更加重视与互联网的结合。本论文探讨利用不断发展和进步的网络技术,实现对个人信......
  • 实现电脑同时登录两个微信账号
    ‌1.使用回车键双击微信图标‌:在按住键盘上的回车键的同时,双击桌面上的微信图标,然后立刻松开回车键。但这种方法可能无法精确控制打开的微信窗口数量,有时可能会打开过多的窗口,导致电脑卡顿甚至死机。‌‌2.使用bat命令‌:新建一个文本文档,并粘贴特定的命令,该命令会启动微信程序。......
  • 微信麦克风与CallKit不成功的解决方法
    分析原因iOS15.5+以上设备使用的巨魔2,覆盖安装商店版微信后,由于权限问题导致;解决方法①权限修改方法打开【TorllStore巨魔商店】找到安装好的微信点一下,底部提示框弹出,选择【Switchto“User”Registration】,提示框弹出,选择【Switchto“User”】,这时候你就是User权限,麦克风......
  • “苹果手机微信分身:解锁iPhone的隐藏功能“
    在智能手机高度普及的今天,微信已成为我们日常生活中不可或缺的社交工具。然而,随着工作与生活界限的日益模糊,单一微信账号已难以满足用户多样化的需求。苹果手机凭借其强大的系统功能和广泛的用户基础,推出了微信分身功能,为用户带来了前所未有的便捷与高效。本文将深入探讨苹果手......
  • uniapp__微信小程序分享好友朋友圈的功能
    1、实现效果这个如果不写代码就是灰色的不能使用 2、api地址uniapp这是使用的api地址点击即可进入   uniapp 3、这是找到个大佬的文章很好用给大家看下uni-app小程序分享功能实现_uniapponsharetimeline-CSDN博客4、记录是方便自己学习4.1把这个建一个文件......
  • 微信小程序SSL证书申请重点和方法
    微信小程序运行模式主要在手机微信内,这一套程序可以解决了用户注册账户及支付相关问题,另外使用很方便,用户不用特意的去安装小程序,只要在微信里面就可以开发,只因为这样微信小程序很受欢迎。对于开发者来说,小程序在加密协议过程,SSL证书起到了关键性的作用,也是微信小程序与微信交......