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


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 相关文章推荐
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
Jul 01 Javascript
详解Vue.js入门环境搭建
Mar 17 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
JS数组去重的6种方法完整实例
Dec 08 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 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
php下实现折线图效果的代码
2007/04/28 PHP
php 操作符与控制结构
2012/03/07 PHP
关于js与php互相传值的介绍
2013/06/25 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
Smarty模板配置实例简析
2019/07/20 PHP
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
Javascript中的默认参数详解
2014/10/22 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
Python中logging模块的用法实例
2014/09/29 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
Django celery异步任务实现代码示例
2020/11/26 Python
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
什么是反射
2012/03/17 面试题
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
企业项目策划书
2014/01/11 职场文书
2014年元旦感言
2014/03/06 职场文书
竞选宣传委员演讲稿
2014/05/24 职场文书
Python爬虫基础讲解之请求
2021/05/13 Python
Python实现制作销售数据可视化看板详解
2021/11/27 Python
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript