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


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 相关文章推荐
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
JavaScript在IE和FF下的兼容性问题
May 19 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
JS如何把字符串转换成json
Feb 21 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
点击按钮弹出模态框的一系列操作代码实例
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
GD输出汉字的函数的分析
2006/10/09 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
python文件和文件夹复制函数
2020/02/07 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
详解python对象之间的交互
2020/09/29 Python
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
什么是GWT的Entry Point
2013/08/16 面试题
请介绍一下WSDL的文档结构
2013/03/17 面试题
离婚协议书样本
2015/01/26 职场文书
新年晚会开场白
2015/05/29 职场文书