微信小程序学习笔记之获取位置信息操作图文详解


Posted in Javascript onMarch 29, 2019

本文实例讲述了微信小程序学习笔记之获取位置信息操作。分享给大家供大家参考,具体如下:

前面介绍了微信小程序文件上传、下载操作。这里分析一下获取位置信息操作。

【获取当前位置信息】wx.getLocation()

getlocation.wxml:

<view>
 <button bindtap="getlocation">获取位置</button>
</view>

getlocation.js:

Page({
 getlocation: function () {
  wx.getLocation({
   type: 'wgs84', //wgs84返回gps坐标,gcj02返回国测局坐标
   success: function(res) {
    console.log(res)
   }
  })
 }
})

点击获取位置按钮,首次调用需要获得用户的scope.userLocation授权:

微信小程序学习笔记之获取位置信息操作图文详解

点击确定,获得位置信息:

 微信小程序学习笔记之获取位置信息操作图文详解

【​使用微信内置地图查看位置】 wx.openLocation()

openlocation.wxml:

<view>
 <button bindtap="openlocation">地图位置</button>
</view>

openlocation.js:

Page({
 openlocation: function () {
  //首先调用wx.getLocation获得当前位置经纬度
  wx.getLocation({
   type: 'gcj02', //wx.openLocation可用坐标系
   success(res) {
    const latitude = res.latitude
    const longitude = res.longitude
    wx.openLocation({
     latitude, //纬度
     longitude, //经度
     scale: 18, //缩放比例:5~18
     name: '北京', //位置名
     address: '挺好', //地址详细说明
     success: function (res) {
      console.log(res)
     }
    })
   }
  })
 }
})

点击地图位置按钮,首次调用也需要获得用户的scope.userLocation授权:

微信小程序学习笔记之获取位置信息操作图文详解

打开地图获得位置如下:

微信小程序学习笔记之获取位置信息操作图文详解

返回成功信息:

微信小程序学习笔记之获取位置信息操作图文详解
 

【打开地图 选择位置】 wx.chooseLocation()

chooselocation.wxml:

<view>
 <button bindtap="chooselocation">选择位置</button>
</view>

chooselocation.js:

Page({
 chooselocation: function () {
  wx.chooseLocation({
   success: function (res) {
    console.log(res)
   }
  })
 }
})

点击选择位置按钮,首次调用还需要获得用户的scope.userLocation授权:

微信小程序学习笔记之获取位置信息操作图文详解

选择位置页面如下:

微信小程序学习笔记之获取位置信息操作图文详解

选择一个位置,点击右上角确定,返回信息如下:

微信小程序学习笔记之获取位置信息操作图文详解

 (经、纬度使用 gcj02 国测局坐标系)

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
Jquery插件 easyUI属性汇总
Jan 19 Javascript
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
js仿小米官网图片轮播特效
Sep 29 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
vue v-model表单控件绑定详解
May 17 Javascript
vue mint-ui tabbar变组件使用
May 04 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 Javascript
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
点击按钮弹出模态框的一系列操作代码实例
Mar 29 #Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 #Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 #Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 #Javascript
微信小程序生成二维码的示例代码
Mar 29 #Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 #Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 #Javascript
You might like
html中select语句读取mysql表中内容
2006/10/09 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
php中的登陆login实例代码
2016/06/20 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python使用gensim计算文档相似性
2016/04/10 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Python开发的HTTP库requests详解
2017/08/29 Python
python获取代码运行时间的实例代码
2018/06/11 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
工程部经理岗位职责
2013/12/08 职场文书
毕业生大学生活自我总结
2014/01/31 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
OpenCV实现普通阈值
2021/11/17 Java/Android
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript
使用CSS实现音波加载效果
2023/05/07 HTML / CSS