小程序 获取当前用户地址及地图显示

步骤

  1. 使用 wx.getLocation来获取当前位置:
    注意;当用户取消位置获取授权之后,再次点击获取位子按钮小程序不会再提醒用户是否授权,这个时候最好自己弹出提示框让用户去设置页面开启授权设置.
wx.getLocation({type: 'wgs84', //wgs返回 gps坐标, gcj02返回可用于wx.openLocation 的坐标altitude: 'false' //true 会返回高度信息,由于获取高度需要较高精确度,会减慢接口返回速度success (res) { //接口调用成功的回调函数const latitude = res.latitude // 纬度,范围为 -90~90,负数表示南纬const longitude = res.longitude // 经度,范围为 -180~180,负数表示西经const speed = res.speed // 速度,单位 m/sconst accuracy = res.accuracy // 位置的精确度const altitude = res.altitude // 高度,单位 m...},fail (err) { //接口调用失败的回调函数},complete(){}
})
注意:
工具中定位模拟使用IP定位,可能会有一定误差。且工具目前仅支持 gcj02 坐标。
使用第三方服务进行逆地址解析时,请确认第三方服务默认的坐标系,正确进行坐标转换。
(后面需要使用获取到的数据打开微信内置地图,最好使用gjc02)
  1. 使用 wx.openLocation打开地址位置:
    将经纬度传进去就可以打开地图并标记当前位置.
wx.getLocation({type: 'gcj02', //返回可以用于wx.openLocation的经纬度success (res) {const latitude = res.latitudeconst longitude = res.longitudewx.openLocation({latitude,longitude,scale: 18})}
})
微信公众平台API:https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.openLocation.html
  1. 使用wx.chooseLocation来打开地图选择位置.(建议在手机上调试)
wx.getLocation({type: 'gcj02', //返回可以用于wx.openLocation的经纬度success (res) {const latitude = res.latitudeconst longitude = res.longitudewx.openLocation({latitude,longitude,wx.chooseLocation({success: function(res) {console.log('定位成功')},})})}
})

实例

<button bindtap="getLocation">获取当前地址</button>getLocation () {let _this = thiswx.getLocation({type: 'gcj02',success(res) {console.log('获取地理经纬度成功' + res)_this.setData({latitude: res.latitude,longitude: res.longitude})wx.openLocation({latitude: res.latitude,longitude: res.longitude,scale: 18,success(res){console.log('打开地址位置成功')wx.chooseLocation({success: function(res) {console.log('定位成功')},fail(err){console.log('定位失败' + err)}})}})},fail(err){console.log(err)}})},缺点:地狱回调,建议异步

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
缺陷:
使用 wx.getLocation来获取当前位置时:当用户使用 wx.getLocation来获取当前位置,取消位置获取授权之后,再次点击获取位子按钮小程序不会再提醒用户是否授权,这个时候最好自己弹出提示框让用户去设置页面开启授权设置
解决办法: 添加用户是否初次进入该页面以及是否地理位置授权的判断
代码:

wx.getSetting({success: (res) => {console.log(JSON.stringify(res))// res.authSetting['scope.userLocation'] == undefined  表示 初始化进入该页面// res.authSetting['scope.userLocation'] == false    表示 非初始化进入该页面,且未授权// res.authSetting['scope.userLocation'] == true    表示 地理位置授权if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {// 非初始化进入该页面 && 未授权wx.showModal({ // 弹出提示框让用户去设置页面开启授权设置title: '请求授权当前位置',content: '需要获取您的地理位置,请确认授权',success (res) {if (res.cancel) {wx.showToast({title: '拒绝授权',icon: 'none',duration: 1000})} else if (res.confirm) {wx.openSetting({success (dataAu) {if (dataAu.authSetting["scope.userLocation"] == true) {wx.showToast({title: '授权成功',icon: 'success',duration: 1000})//再次授权,此处省略调用wx.getLocation的API} else {wx.showToast({title: '授权失败',icon: 'none',duration: 1000})}}})}}})} else if (res.authSetting['scope.userLocation'] == undefined) {//初次进入该页面,此处省略调用wx.getLocation的API}else {// 地理位置授权成功 ,此处省略调用wx.getLocation的API}}})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/401511.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS3 box-shadow 属性

2019独角兽企业重金招聘Python工程师标准>>> 实例 向 div 元素添加 box-shadow&#xff1a; div { box-shadow: 10px 10px 5px #888888; } 亲自试一试 <!DOCTYPE html> <html> <head> <style> div { width:300px; height:100px; backgroun…

[译]Kinect for Windows SDK开发入门(二):基础知识 上

上篇文章介绍了Kinect开发的环境配置&#xff0c;这篇文章和下一篇文章将介绍Kinect开发的基本知识&#xff0c;为深入研究Kinect for Windows SDK做好基础。 每一个Kinect应用都有一些基本元素。应用程序必须探测和发现链接到设备上的Kinect传感器。在使用这些传感器之前&…

小程序 开发经验

项目目录理解components自定义组件库config一个公用的数据配置images本地、上传的图片放置pagespages目录存储小程序的每个页面&#xff0c;每个页面包含四个文档.json为配置文件.wxml 为模板文件&#xff0c;相当于HTML模板.wxss 为样式文件&#xff0c;相当于HTML的CSS样式表…

EasyUI,二级页面内容的操作

2019独角兽企业重金招聘Python工程师标准>>> 父页面获取子页面的数据 1.若仅仅是勾选&#xff0c;则将勾选的放到map中(key&#xff0c;value)&#xff0c;key是能验证数据唯一的字段&#xff0c;value就是勾选行的rowData&#xff1b; 再将map转换成json格式的字…

Javascript 对象二(Number、String、Boolean、Array、Date、Math、RegExp)

Javascript 对象二&#xff08;Number、String、Boolean、Array、Date、Math、RegExp&#xff09;Number 数字 对象String 字符串 对象Boolean 布尔 对象Array 数组 对象Date 日期 对象Math 算数 对象RegExp 正则表达式 对象Number 数字 对象 JavaScript中 数字不分为整数类型…

GItHub--Makedown语法学习(快速入门)

段落支持两种标题的语法&#xff1a;Setext 和 atx 形式Setext形式&#xff1a;利用 &#xff08;最高阶标题&#xff09;和 - &#xff08;第二阶标题&#xff09; 标题1标题2 ---Atx 形式&#xff1a;在行首插入 # 即可。可以增加一级标题、二级标题、三级标题、四级标题、…

转:ASP.NET MVC4细嚼慢咽---(5)js css文件合并

原文&#xff1a;http://blog.csdn.net/zx13525079024/article/details/19161777 MVC4增加了一些新功能&#xff0c;接下来&#xff0c;我们来研究下MVC4中的新增功能&#xff0c;我们在新建一个MVC4项目的时候&#xff0c;会发现在项目下多出了一个App_Start文件夹&#xff0c…

[读码时间] 完美拖拽

说明&#xff1a;代码取自网络&#xff0c;注释为原文所有&#xff01; <!DOCTYPE html> <html> <head><meta charset"utf-8" /><title>完美拖拽</title><style type"text/css">html, body {overflow: hidden;}…

Oracle 随机取某一列的值

2019独角兽企业重金招聘Python工程师标准>>> select t.recd_idfrom (select recd_id, ROWNUM RN from RT_TICKETS_BIS_RECD) twhere t.RN (select round(DBMS_RANDOM.VALUE(1, count(1)))from RT_TICKETS_BIS_RECD); 1) select round(DBMS_RANDOM.VALUE(1, count(1…

ZooKeeper典型应用场

为什么80%的码农都做不了架构师&#xff1f;>>> 数据发布与订阅&#xff08;配置中心&#xff09; 发布与订阅模型&#xff0c;即所谓的配置中心&#xff0c;顾名思义就是发布者将数据发布到ZK节点上&#xff0c;供订阅者动态获取数据&#xff0c;实现配置信息的集…

Mysql jdbc driver源码浅析(一)

jdbc操作实例代码 //1. 加载驱动Class.forName("com.mysql.jdbc.Driver");//2. 获取连接Connection connection DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/dbName", "userName", "password");Statement stmt conne…

用rem来做响应式开发

电脑版的商城昨晚做完了&#xff0c;今天赶着做手机端的&#xff0c;提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度&#xff0c;保证在不同手机上都能正常显示给用户&#xff0c;我之前做这类网站都是无脑引进bootstrap的。但前一个项目做完之后我发现bootstrap虽…

Java 编程下 Eclipse 如何设置单行代码显示的最大宽度

Eclipse 下一行代码的默认宽度是 80 &#xff0c; 稍长一点的一行代码就会自动换行&#xff0c;代码可读性较差&#xff0c;我们可以自己在 Eclipse 对代码宽度进行设置。 设置路径为&#xff1a;【Window】→【Preferences】→【Java】→【Code Style】→【Formatter】&#x…

基于VMWare配置VxWorks开发环境

常规VxWorks的开发环境都是基于目标开发板或目标机来构建的&#xff0c;但并非所有人都具备这样的条件&#xff0c;所以本文主要介绍如何基于vmware来构建VxWorks开发环境。Step 1. 安装vmware 首先需要安装vmware, 版本没有什么限制&#xff0c;我装的是vmware 8.0&#xff0c…

keepalived实现高可用nginx反向代理的简单案例

写在前面&#xff1a;如果此文有幸被某位朋友看见并发现有错的地方&#xff0c;希望批评指正。如有不明白的地方&#xff0c;愿可一起探讨。案例拓扑图安装keepalived和nginx安装keepalived# yum -y install keepalived创建nginx用户组及nginx用户# groupadd -r nginx # userad…

gulp+PC前端静态页面项目开发

前言&#xff1a; 现在单页面很流行&#xff0c;但是在 PC 端多页面还是常态&#xff0c;所以构建静态页面的工具还有用武之地 gulp构建前言&#xff1a; 如今我们开发web网页的方式主要有几种&#xff0c;使用vue-cli、create-react-app、webpack、不借助构建工具等实现单页…

vue开发问题积累

mounted钩子中使用$refs出现undefined 原因&#xff1a;如果在DOM结构中的某个DOM节点使用了v-if、v-show或者v-for&#xff08;即根据获得的后台数据来动态操作DOM&#xff0c;即响应式&#xff09;&#xff0c;那么这些DOM是不会再mounted阶段找到的。 **解决方法&#xff1…

动态规划0—1背包问题

动态规划0-1背包问题 问题描写叙述&#xff1a;给定n种物品和一背包。物品i的重量是wi&#xff0c;其价值为vi&#xff0c;背包的容量为C。问应怎样选择装入背包的物品&#xff0c;使得装入背包中物品的总价值最大?对于一种物品&#xff0c;要么装入背包&#xff0c;要么不装。…

vmstat命令详解

参数详情&#xff1a; r runingb blockswpd 虚拟内存使用时间free 物理free内存buff 从硬盘--->内存的 缓冲cache 从内存--->硬盘的 缓存si 从磁盘写入swap的大小/sso 从swap写入磁盘的大小/sbi 块设备每秒接收的块数量bo 块设备每秒发送的块数量cs 每秒上下文切换次数us…

CSharp设计模式读书笔记(22):策略模式(学习难度:★☆☆☆☆,使用频率:★★★★☆)...

策略模式(Strategy Pattern)&#xff1a;定义一系列算法类&#xff0c;将每一个算法封装起来&#xff0c;并让它们可以相互替换&#xff0c;策略模式让算法独立于使用它的客户而变化&#xff0c;也称为政策模式(Policy)。 模式角色与结构&#xff1a; 示例代码&#xff1a; usi…