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


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 相关文章推荐
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
在linux中使用包管理器安装node.js
Mar 13 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
form表单序列化详解(推荐)
Aug 15 Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
vue实现通讯录功能
Jul 14 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
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
php简单压缩css样式示例
2016/09/22 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
Python文件去除注释的方法
2015/05/25 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
Django REST 异常处理详解
2020/07/15 Python
Python解析微信dat文件的方法
2020/11/30 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
公司领导班子对照检查材料
2014/09/24 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB